Pulsanti CSS: utilizzo di btns.css
La libreria di pulsanti btns.css è un insieme di pulsanti CSS che fanno uso di transizioni fluide.
Caricamento del file bttn.css
Per caricare la libreria btns.css, vai al link btns.css e incolla la riga seguente nella sezione <head> della pagina web.
<head>
<link rel = "stylesheet" href = "btns.css">
</head>Utilizzo del pulsante
Crea un pulsante utilizzando il tag del pulsante html e aggiungi stili btn, btn-blue con l'identificatore di dimensione btn-lg.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/btns.css">
</head>
<body>
<button class = "btn btn-blue">Submit</button>
</body>
</html>Produrrà il seguente output:
Definizione della dimensione
Puoi aumentare o diminuire la dimensione di un pulsante definendone le dimensioni utilizzando CSS e utilizzandolo insieme al nome della classe, come mostrato di seguito. Nell'esempio fornito, abbiamo modifiche di quattro dimensioni.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-blue">Large</button>
<button class = "btn btn-sm btn-blue">Small</button>
</body>
</html>Produrrà il seguente output:
Definizione del colore
Proprio come la dimensione, puoi definire il colore del pulsante utilizzando CSS. L'esempio seguente mostra come modificare il colore del pulsante.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-red">Red</button>
<button class = "btn btn-lg btn-blue">Blue</button>
<button class = "btn btn-lg btn-green">Green</button>
<button class = "btn btn-lg btn-sea">Sea</button>
<button class = "btn btn-lg btn-yellow">Yellow</button>
<button class = "btn btn-lg btn-orange">Orange</button>
<button class = "btn btn-lg btn-purple">Purple</button>
<button class = "btn btn-lg btn-black">Black</button>
<button class = "btn btn-lg btn-cloud">Cloud</button>
<button class = "btn btn-lg btn-grey">Grey</button>
</body>
</html>Produrrà il seguente output:
Definizione dello stile
Proprio come la dimensione, il colore puoi definire lo stile del pulsante utilizzando CSS. L'esempio seguente mostra come modificare lo stile del pulsante.
<html>
<head>
<link rel = "stylesheet" href = "/css_buttons/btns.css">
</head>
<body>
<button class = "btn btn-lg btn-blue">Regular</button>
<button class = "btn btn-lg btn-blue btn-round">Round</button>
<button class = "btn btn-lg btn-blue btn-raised">Raised</button>
<button class = "btn btn-blue btn-sm">Small</button>
<button class = "btn btn-lg btn-outline-blue ">Outlined</button>
</body>
</html>Produrrà il seguente output: