Pulsanti CSS: utilizzo di bttn.css
La libreria bttn.css fornisce una vasta raccolta di stili semplici per i pulsanti. Questa libreria è completamente gratuita sia per uso personale che commerciale. Questi pulsanti possono essere personalizzati facilmente.
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 = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>Utilizzo del pulsante
Crea un pulsante usando il tag html del pulsante e aggiungi stili bttn-slant, bttn-royal con l'identificatore di dimensione bttn-lg.
<html>
<head>
<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>
<body>
<button class = "bttn-slant">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 = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>
<body>
<button class = "bttn-pill bttn-lg">Large</button>
<button class = "bttn-pill bttn-md">Medium</button>
<button class = "bttn-pill bttn-sm">Small</button>
<button class = "bttn-pill bttn-xs">Extra 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 = "https://cdnjs.cloudflare.com/ajax/libs/bttn.css/0.2.4/bttn.css">
</head>
<body>
<button class = "bttn-pill bttn-lg bttn-primary">Primary</button>
<button class = "bttn-pill bttn-md bttn-warning">Warning</button>
<button class = "bttn-pill bttn-sm bttn-danger">Danger</button>
<button class = "bttn-pill bttn-xs bttn-success">Success</button>
<button class = "bttn-pill bttn-xs bttn-royal">Royal</button>
</body>
</html>Produrrà il seguente output: