Pulsanti CSS - Utilizzo di Beautons

La libreria di pulsanti Beautons è un semplice toolkit CSS per la creazione di pulsanti. Permette di applicare una combinazione di stili e dimensioni per creare un enorme set di pulsanti coerenti, robusti e solidi.

Caricamento dei Beautons

Per caricare la libreria Beautons, scarica il css da GitHub e incolla la riga seguente nella sezione <head> della pagina web.

<head>
   <link rel = "stylesheet" href = "beauton.min.css">
</head>

Utilizzo del pulsante

Crea un pulsante usando il tag del pulsante html e aggiungi stili btn.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn"<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/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--small">Small</button> <br/> <br/> 
      <button class = "btn btn--large btn-blue">Large</button><br/><br/>
      <button class = "btn btn--huge">Huge</button><br/><br/>
      <button class = "btn btn--full">Full</button><br/><br/>
   </body>
</html>

Produrrà il seguente output:









Definizione della dimensione del carattere

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/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--alpha">Huge</button><br/><br/>
      <button class = "btn btn--beta">Large</button><br/><br/>
      <button class = "btn btn--gamma">Regular</button><br/><br/>
   </body>
</html>

Produrrà il seguente output:







Definizione dei pulsanti funzionali

Il seguente esempio mostra vari pulsanti funzionali.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--positive">Positive</button> <br/>  <br/>
      <button class = "btn btn--negative">Negative</button><br/><br/>
      <button class = "btn btn--inactive">Disabled</button><br/><br/>
      <button class = "btn btn--soft">Rounded</button><br/><br/>
      <button class = "btn btn--hard">Hard</button><br/><br/>
   </body>
</html>

Produrrà il seguente output:











Combinare gli stili

L'esempio seguente mostra come combinare gli stili dei pulsanti.

<html>
   <head>
      <link rel = "stylesheet" href = "/css_buttons/beauton.min.css">
   </head>
   
   <body>
      <button class = "btn btn--large btn--positive">Button</button>   <br/><br/>
      <button class = "btn btn--positive btn--alpha btn--small">Button</button><br/><br/>
      <button class = "btn btn--negative btn--full btn--soft">Button</button><br/><br/>
      <p>A <button class = "btn  btn--natural">button</button> in a paragraph.</p><br/><br/>
   </body>
</html>

Produrrà il seguente output:







UN in un paragrafo.