Web e Code Script visite 343

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.
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.
Condividi l'articolo

Lascia un commento

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



Potrebbe anche interessarti

webdesign

Web e Code Script

Icone di Natale in png e vettoriali da scaricare gratis

3 minSi avvicina la festività del Natale e noi creativi dobbiamo farci subito…

webdesign

Web e Code Script

Foto e dati sull’autore nei risultati di ricerca Google

2 min Da un po’ di tempo vi sarete sicuramente accorti che in…

webdesign

Web e Code Script

Icon Font Awesome. Come inserire sul sito icone tramite font

1 minLe icone sono ormai uno standard per chi realizza siti internet. Permettono…