Pulsanti CSS - Guida rapida

Un pulsante su una pagina web è l'attore principale in cui un utente fa clic dopo aver selezionato o inserito gli input richiesti e invia i dettagli per ottenere le informazioni richieste. Questo tutorial si concentra su dieci librerie CSS principali per rendere i pulsanti fantastici, ovvero:

  • 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.

  • Pushy Buttons - La libreria Pushy Buttons è una piccola libreria CSS Pressable Buttons.

  • btns.css - La libreria dei pulsanti btns.css è un insieme di pulsanti CSS che fanno uso di transizioni fluide.

  • Social Buttons - La libreria Social Buttons è un set di pulsanti CSS realizzati in puro CSS e sono basati su Bootstrap e Font Awesome.

  • 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.

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:

Di seguito sono riportati i vari stili disponibili in bttn.css

Sr. No. Stile Di medie dimensioni Colore primario Demo
1 bttn-slant bttn-md bttn-primaria
2 bttn-unite bttn-md bttn-primaria
3 bttn-pill bttn-md bttn-primaria
4 bttn-float bttn-md bttn-primaria
5 bttn-material-flat bttn-md bttn-primaria
6 bttn-material-circle bttn-md bttn-primaria
7 bttn-fill-circle bttn-md bttn-primaria
8 bttn-gradiente bttn-md bttn-primaria
9 bttn-jelly bttn-md bttn-primaria
10 bttn-stretch bttn-md bttn-primaria
11 bttn-minimal bttn-md bttn-primaria
12 bttn-bordered bttn-md bttn-primaria
13 bttn-simple bttn-md bttn-primaria

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:

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:

La libreria Social Buttons è un insieme di pulsanti CSS realizzati in puro CSS e sono basati su Bootstrap e Font Awesome.

Caricamento dei pulsanti social

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

<head>
   <link rel = "stylesheet" href = "bootstrap-social.css">
</head>

Utilizzo del pulsante

Crea un pulsante utilizzando il tag di ancoraggio html e aggiungi stili btn, btn-block con lo specificatore sociale btn-social.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </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/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "/css_buttons/bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-block btn-lg btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-md btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-sm btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
      <a class = "btn btn-block btn-xs btn-social btn-twitter">
         <span class = "fa fa-twitter"></span>
         Login with Twitter
      </a>
   </body>
</html>

Produrrà il seguente output:

Utilizzando solo le icone

L'esempio seguente mostra come scegliere i pulsanti solo icona.

<html>
   <head>
      <link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.min.css">
      <link rel = "stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
      <link rel = "stylesheet" href = "bootstrap-social.css">
   </head>
   
   <body>
      <a class = "btn btn-social-icon btn-twitter">
         <span class = "fa fa-twitter"></span>
      </a>   
   </body> 
</html>

Produrrà il seguente output:

Di seguito sono riportati i vari stili disponibili nei pulsanti social.

Sr.No. Stile Di medie dimensioni Pulsante Pulsante icona
1 btn-twitter btn-md Accedi con Twitter
2 btn-bitbucket btn-md Accedi con Bitbucket
3 btn-dropbox btn-md Accedi con Dropbox
4 btn-facebook btn-md Fai il login con facebook
5 btn-btn-flickr btn-md Accedi con Flickr
6 btn-btn-foursquare btn-md Accedi con Foursquare
7 btn-btn-github btn-md Accedi con Github
8 btn-btn-google btn-md Accedi con Google
9 btn-btn-instagram btn-md Accedi con Instagram
10 btn-btn-linkedin btn-md Accedi con LinkedIn
11 btn-btn-microsoft btn-md Accedi con Microsoft
12 btn-btn-odnoklassniki btn-md Accedi con Odnoklassniki
13 btn-btn-openid btn-md Accedi con Openid
14 btn-btn-pinterest btn-md Accedi con Pinterest
15 btn-btn-reddit btn-md Accedi con Reddit
16 btn-btn-soundcloud btn-md Accedi con Soundcloud
17 btn-btn-tumblr btn-md Accedi con Tumblr
18 btn-btn-twitter btn-md Accedi con Twitter
19 btn-btn-vimeo btn-md Accedi con Vimeo
20 btn-btn-vk btn-md Accedi con Vk
21 btn-btn-yahoo btn-md Accedi con Yahoo

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.