Come molti di voi sapranno, è in sviluppo l’evoluzione dell’attuale CSS2, il CSS3. Una parte delle sue nuove funzioni sono già supportate dai browser WebKit (Safari, Chrome) e Gecko (Firefox), come ad esempio, border-radius o box-shadow. Inoltre, il CSS3 presenta una serie di features davvero interessanti e in costante aggiornamento, come la possibilità di creare animazioni o di gestire le sfumature. Ed è proprio della gestione delle sfumature che ci interesseremo oggi, mostrando come creare un’attraente bottone in stile web 2.0 senza utilizzare immagini. Dato che ci sono alcune differenze nel modo di applicare le sfumature tra WebKit e Gecko, il risultato di questa guida sarà compatibile solo con i browser WebKit. Potete vedere una demo del risultato finale cliccando qui, mentre potete scaricare il file utilizzato cliccando qui.

La sintassi tipica di un gradiente è la seguente:

-webkit-gradient(linear, 0% 0%, 0% 100%, from(#1D243D), to(#4060FF))

Che, in questo caso, genera un gradiente con le tonalità del blu.

E’ comunque vastissima la documentazione sui gradienti in rete; in primis, vi consiglio quella del W3C e del centro sviluppo di Safari.
Inoltre ho anche scovato recentemente questo utile tool che permette di creare gradienti online in CSS3 con tanto di preview.

Dopo questa breve introduzione, iniziamo con la guida vera e propria. Nel nostro CSS, dichiarermo le prime righe di codice del bottone:

.bottone{
height:60px;
width:600px;
margin:10px;
cursor:pointer;
}

In questo modo specificheremo semplicemente l’altezza, la larghezza, un piccolo margine ed imposteremo come cursore la manina.
Ora iniziamo subito ad applicare il gradiente. Vi consiglio di utilizzare il generatore indicato in precedenza in modo tale da ottenere il risultato cercato nel minor tempo possibile.
E’ questo, comunque, il gradiente utilizzato da noi.

-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D3E120), to(#6F9624), color-stop(.5,#A0BF1E),color-stop(.5,#97b90d));

Lo inseriremo nel nostro .bottone mediante il background-image:

background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D3E120), to(#6F9624), color-stop(.5,#A0BF1E),color-stop(.5,#97b90d));
height:60px;
width:600px;
margin:10px;
cursor:pointer;

Aggiungiamo, infine, gli angoli arrotondati e una leggera ombra di sfondo.

background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D3E120), to(#6F9624), color-stop(.5,#A0BF1E),color-stop(.5,#97b90d));
height:60px;
width:600px;
margin:10px;
cursor:pointer;
-webkit-border-radius:5px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);

Ora passiamo, invece, alla formattazione del testo. Senza troppe spiegazioni (la formattazione del testo è più una questione di gusto ed occhio), aggiungeremo queste righe di codice:

background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#D3E120), to(#6F9624), color-stop(.5,#A0BF1E),color-stop(.5,#97b90d));
height:60px;
width:600px;
margin:10px;
cursor:pointer;
-webkit-border-radius:5px;
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5);
 
/* Formattazione testo */
font-family:Trebuchet MS, Arial, Helvetica, sans-serif;
font-size:20pt;
font-weight:bold;
letter-spacing:-1px;
line-height:55px;
text-align:center;
color:#fff;
text-shadow:0 -1px 0 #708e08;

Non ci resta che specificare cosa avviene al passaggio del mouse. Nel nostro caso, vi sarà un cambio di sfumatura, di colore del testo e di ombreggiatura del testo. Questa volta opteremo per una sfumatura lineare su delle tonalità chiare.

.bottone:hover{
background-image:-webkit-gradient(linear, 0% 0%, 0% 100%, from(#FFFFFF), to(#d7d7d7));
color:#343434;
text-shadow:0 1px 0 #fff;
}

Non ci resta che richiamare il bottone nel nostro html tramite:

<p class="bottone">Testo</p>

Ed il gioco è fatto Vi ricordo che potete vedere una demo qui, mentre scaricare il file utilizzato cliccando qui.