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;
}
Iscriviti alla nostra Newsletter qui e seguici su Facebook per aggiornamenti!
Articoli recenti:
- Recensione In Fuga. Ciclo Le Cronache dell’Ultimo Druido di Kevin Hearne
- Recensione Fool Moon di Jim Butcher
- Recensione Storm Front di Jim Butcher
- Upgrade Scheda Rete. Sostituzione della Realtek RTL8822CE
- Da jQuery a JavaScript Puro: Sfruttare il Potenziale Nativo del Web