Creare un bel bottone in Css3 senza usare immagini

Oggi vedremo come realizzare in pochi semplici passi un bottone dall’aspetto davvero gradevole, senza l’utilizzo di immagini di sfondo, compatibile con tutti i principali browser di navigazione. Spesso infatti nel web design si abusa un pò delle immagini che comportano un appesantimento della pagina e del suo “scaricamento”. Bisogna imparare a farne a meno dunque, quando questo è possibile.

Il codice Html

Dopo aver creato il nostro form, avremo sicuramente bisogno di inserire un tasto submit che ci permetterà di inviare la richiesta specifica all’indirizzo di posta desiderato. Qui di seguito il codice Html del bottone che richiama la CLASSE “btn”. Ovviamente dentro VALUE possiamo metterci ciò che vogliamo, io in questo caso ho inserito un classico “invia”, che apparirà scritto all’interno del pulsante.

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

Il codice CSS3

Abbiamo collegato il bottone “invia” alla classe “btn”, ora passiamo al codice CSS che ci permetterà di formattare il bottone come vogliamo, rendendolo esteticamente molto piacevole.

» famiglia di caratteri
» dimensione del carattere
» peso del font
» decorazione, ossia se vogliamo che appaia sottolineato o meno
» colore della scritta
» cursor, ossia la trasformazione della freccia in manina quando si va sul tasto
» padding, ossia quanto la scritta deve staccarsi dal bordo
» bordo del bottone, ossia l’equivalente della traccia nei programmi di grafica
» radius, ossia il raggio di arrotondamento del bottone

.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 }

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.