Web e code script visite 133

Creare un pulsante rollover con Css3 senza usare immagini

1 min

Pulsante rollover Css senza 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 }

Riproduzione riservata © La riproduzione è concessa solo citando la fonte con link all'articolo. Condividi l'articolo


Articolo a cura di: Del Re Valerio
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.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *



Potrebbe anche interessarti

webdesign

Web e code script

What colour is it? L’orologio esadecimale

1 minOggi vi segnalo un sito creativo, da veri nerd, per appassionati di…

webdesign

Web e code script

Whois dominio: come conoscere chi ha registrato un dominio

1 min Talvolta può essere necessario conoscere il proprietario del dominio di un…

webdesign

Web e code script

Le migliori pagine di errore 404 personalizzate e creative

1 minSapete cos’è una pagina 404? Si tratta di una pagina che indica…