
Creare un pulsante rollover con Css3 senza usare immagini
1 minNel 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 }
Dott. in Comunicazione e Pubblicità per le Organizzazioni. Sono l'ideatore del blog Robadagrafici.com e mi occupo di comunicazione visiva, grafica e web, per le aziende.