Pulsanti CSS - Utilizzo di pulsanti invadenti
La libreria Pushy Buttons è una piccola libreria CSS Pressable Buttons.
Caricamento del file bttn.css
Per caricare la libreria pushy-buttons.min.css, scarica il css da github e incolla la riga seguente nella sezione <head> della pagina web.
<head>
<link rel = "stylesheet" href = "pushy-buttons.min.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/pushy-buttons.min.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/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--lg btn--blue">Large</button>
<button class = "btn btn--df btn--blue">Normal</button>
<button class = "btn btn--md btn--blue">Medium</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/pushy-buttons.min.css">
</head>
<body>
<button class = "btn btn--lg btn--red">Large</button>
<button class = "btn btn--df btn--green">Normal</button>
<button class = "btn btn--md btn--blue">Medium</button>
</body>
</html>Produrrà il seguente output: