Nel precedente articolo abbiamo visto come creare un bottone in CSS3 senza utilizzare immagini… ma non finisce qui.

Se siete soliti girare attraverso i blog alla ricerca di tutorial, avrete sicuramente notato come ce ne siano tantissimi che spiegano come creare un pulsante rollover in CSS, ma sempre attraverso l’utilizzo di immagini e assegnando una background position in CSS. Tuttavia pochi sanno che questo effetto è possibile anche solo utilizzando codice CSS. Come? Ve lo spiego subito.

Il codice Html

Come già abbiamo imparato, possiamo creare un bottone attraverso una semplice riga di codice Html.

<input class="btn" value="INVIA" type="submit">

Il codice CSS3

Ma veniamo ora al codice CSS che ci serve, oltre che a dare uno stile al nostro pulsante, anche a dargli il famoso effetto rollover, quello che si ottiene quando si va con il mouse sopra il pulsante, quindi in stato hover, e quando lo si preme, quindi in stato active.

.btn { 
font-family: Arial, Helvetica, sans-serif; font-size: 12px; 
font-weight: bold; text-decoration: none;
color: #FFFFFF; cursor: pointer; padding: 3px 8px 3px 8px;
background: #0786C5; border: 1px solid #0786C5;
-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px }

.btn:hover{ 
font-family: Arial, Helvetica, sans-serif; font-size: 12px; 
font-weight: bold; text-decoration: none;
color: #0786C5; cursor: pointer; padding: 3px 8px 3px 8px;
background: #FFFFFF; border: 1px solid #0786C5;
-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px }

.btn:active{ 
font-family: Arial, Helvetica, sans-serif; font-size: 12px; 
font-weight: bold; text-decoration: none;
color:#FFFFFF; cursor: pointer; padding: 3px 8px 3px 8px;
background:#ff00ff; border: 1px solid #0786C5;
-moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px }