5 stili CSS per button moderni e responsivi

In questa pagina potrai trovare 5 stili CSS differenti per i tuoi <button> HTML da inserire nelle tue pagine. Trova ispirazione con pulsanti CSS da noi proposti qui di seguito, con comportamento responsivo e adattabile su tutti i dispositivi e con un design moderno ed accattivante.

5 design per i tuoi button sviluppati in puro CSS, poche righe di codice CSS e HTML facili da integrare nei tuoi progetti e fogli di stile con relativo codice sorgente.

5 migliori stili CSS per pulsanti/button

Abbiamo selezionato per te 5 migliori stili CSS dedicati ai buttons/pulsanti HTML, sviluppati in puro CSS con comportamento responsivo e adattabile su tutti i tipi di display, anche su smartphone.

Per ogni stile di pulsante potrai visualizzare, copiare e modificare il codice sorgente CSS a tuo piacimento.

Se vuoi imparare le basi di CSS, segui il nostro corso gratuito.

Stile 1

Codice sorgente:

<button class="btn1">
  Cliccami
</button>

.btn1{
  display:inline-block;
  padding:0.4em 1em;
  border:0.2em solid #625EE9;
  margin:0.1em 0.2em;
  border-radius:0.1em;
  box-sizing: border-box;
  text-decoration:none;
  font-weight:300;
  color:#625EE9;
  text-align:center;
  transition: 0.4s;
  cursor:pointer;
  font-weight:bold;
}
.btn1:hover{
  color:#9491EC;
  background-color:#FFFFFF;
}

Stile 2

Codice sorgente:

<button class="btn2">
  Cliccami
</button>

  .btn2{
    display:inline-block;
    padding:0.5em 1.7em;
    border:0.25em solid #424242;
    margin:0.1em 0.2em;
    border-radius:0.35em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:"arial";
    font-weight:300;
    color:#424242;
    text-align:center;
    transition: 0.2s;
    background:transparent;
    cursor:pointer;
    font-weight:bold;
    text-transform: uppercase;
  }
  .btn2:hover{
    color:#171717;
    border:0.25em solid #171717;
    background-color:#EAEAEA;
  }
  .btn2:active, .btn2:focus{
    background-color:#FFFFFF;
  }

Stile 3

Codice sorgente:

<button class="btn3">
  Cliccami
</button>

  .btn3{
    display:inline-block;
    padding:1em 2em;
    border:none;
    margin:0.03em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:"arial";
    font-weight:300;
    color:#FDFDFD;
    text-align:center;
    transition: 0.2s;
    background:rgb(123,135,255);
    cursor:pointer;
    font-weight:bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
  }
  .btn3:hover{
    background:rgb(96,110,255);
  }
  .btn3:active, .btn3:focus{
    background:rgb(195,200,255);
    color:rgb(96,110,255);
  }

Stile 4

Codice sorgente:

<button class="btn4">
  Cliccami
</button>

  .btn4{
    display:inline-block;
    padding:0.6em 1em;
    border:none;
    margin:0.2em 0.1em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:"arial";
    font-weight:300;
    color:#FDFDFD;
    border-radius:3em;
    text-align:center;
    transition: 0.1s;
    background:rgb(46,170,57);
    cursor:pointer;
    font-weight:bold;
    letter-spacing: 0.05em;
  }
  .btn4:hover{
    background:rgb(57,189,69);
  }
  .btn4:active, .btn4:focus{
    background:rgb(80,217,93);
  }

Stile 5

Codice sorgente:

<button class="btn5">
  Cliccami
</button>

  .btn5{
    display:inline-block;
    padding:0.7em 1.4em;
    margin:0 0.3em 0.3em 0;
    border:none;
    border-radius:0.5em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'arial';
    text-transform:uppercase;
    font-weight:400;
    color:#FFFFFF;
    background-color:#FF4233;
    box-shadow:inset 0 -0.6em 0 -0.3em rgba(0,0,0,0.20);
    text-align:center;
    position:relative;
    cursor:pointer;
  }
  .btn5:hover{
    background:#E64B3E;
  }
  .btn5:active{
    background:#D7372A;
    top:0.15em;
    color:#D9D9D9;
    box-shadow:none;
  }

Articoli recenti:

• Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
• Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web
• Come Risolvere i Problemi di Connessione Bluetooth al PC
• Guida alla Cybersecurity: Come proteggerti da minacce informatiche
• Come Aggiungere un Dizionario su App Kindle