Creare un pulsante rollover con Css3 senza usare immagini

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 }