Bottoni usando solo i CSS
Attenzione
Questo articolo è stato pubblicato più di un anno fa, potrebbero esserci stati sviluppi.
Ti preghiamo di tenerne conto.
Nell’articolo di oggi vediamo come trasformare una semplice form, con un bottone non formattato in un’altrettanto semplice form con un bottone formattato. Tutti i colori, i gradienti e le ombreggiature saranno “costruite” usando le regole CSS relative alla versione 3. Queste poche regolette sono da prendere un po’ con le pinze, perché funzionano perfettamente con i browser basati su Webkit (Safari, Konquerror, iPad/iPhone) e Gecko (Firefox e simili), ma sono inutili su tutte le versioni di Internet Explorer precedenti alla 9.
Iniziamo con l’HTML. Collegheremo anche il file “style.css”:
<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css" charset="utf-8" />
</head>
<body>
<form action="#">
<table>
<tr>
<td>Nome:</td><td><input type="text" name="name" value=""></td>
</tr>
<tr>
<td>Mail:</td><td><input type="text" name="mail" value=""></td>
</tr>
<tr>
<td colspan="2" align="center"><button id="pulsante">Invia</button></td>
</tr>
</table>
</form><!--end form-->
</body>
</html>
Senza la formattazione data dal CSS questo sarebbe il risultato “nudo e crudo”.
1. Stile iniziale
Iniziamo a inserire all’interno del nostro “style.css” le seguenti righe di codice per dare stile al bottone:
button{
width: 100px;
outline: none;
cursor: pointer;
text-align: center;
text-decoration: none;
font: bold 12px Arial, Helvetica, sans-serif;
color: #fff;
padding: 10px 20px;
border: solid 1px #0076a3;
background: #0095cd;
}
Intanto diamo una dimensione fissa, allineamo il testo al centro senza decorazioni, ne impostiamo il font (font), il colore (color) e le distanze dagli altri elementi (padding). Impostiamo poi il colore di sfondo del bottone e il colore del bordo. Questo è il risultato:
2. Gradiente sullo sfondo
Potremmo poi aggiungere una sfumatura al colore di sfondo, per dargli una tridimensionalità. Aggiungiamo le seguenti righe all’elemento “button” del nostro “style.css”:
background: -webkit-gradient(linear, left top, left bottom, from(#00adee), to(#0078a5)); background: -webkit-linear-gradient(top, #00adee, #0078a5); background: -moz-linear-gradient(top, #00adee, #0078a5); background: -ms-linear-gradient(top, #00adee, #0078a5); background: -o-linear-gradient(top, #00adee, #0078a5);
Di queste righe c’è poco da spiegare, aggiungono un gradiente verticale allo sfondo. Questo è il risultato:
3. Arrotondare gli angoli
A seconda delle preferenze potremmo voler arrotondare gli angoli del bottone. Aggiungiamo le seguenti righe all’elemento “button” del nostro “style.css”:
-moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;
Può essere utile capire il funzionamento di questi valori. Bisogna giocarci un po’ per trovare il risultato voluto. Di seguito il risultato:
4. Ombre
Per conferire il tocco finale di tridimensionalità è necessario dare una leggera ombreggiatura. Aggiungiamo queste ultime righe all’elemento “button” del nostro “style.css”:
-moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); box-shadow: 0 1px 3px rgba(0,0,0,0.5);
Questo è il risultato:
Ed ora che abbiamo un bottone con stile non resta che impostare le classiche azioni al passaggio del mouse e al click. Di seguito le righe da aggiungere al file “style.css”:
button:hover {
background: #0095cd;
background: -webkit-gradient(linear, left top, left bottom, from(#0078a5), to(#00adee));
background: -webkit-linear-gradient(top, #0078a5, #00adee);
background: -moz-linear-gradient(top, #0078a5, #00adee);
background: -ms-linear-gradient(top, #0078a5, #00adee);
background: -o-linear-gradient(top, #0078a5, #00adee);
background: linear-gradient(top, #0078a5, #00adee);
}
button:active{
position: relative;
top: 1px;
}
E questo è il risultato funzionante:
0 commenti