Pulsanti stile web 2.0

Questo è il risultato che otterremo (forse per un uso pratico le dimensioni vanno rimpicciolite).

L'esempio è riferito al pulsante verde, per il blu basta semplicemente cambiare il colore del gradiente.

Creare il gradiente e il bagliore interno

Tracciamo un rettangolo con angoli arrotondati e coloriamolo con un gradiente verticale (nel caso specifico il colore va da #2B822B a #00CC00). 

 
Selezioniamo ancora il rettangolo e impostiamo un bagliore interno di colore bianco, largo 2px e con trasparenza 30%.

Creare il riflesso

Tracciamo un ellisse come nella figura (lo sfondo nero ha solo lo scopo di far vedere l'immagine semitrasparente), con gradiente orizzontale da bianco a bianco, e impostiamo a 10 l'opacità del colore di sinistra (v. figura). Allineiamo l'ellisse sul rettangolo, scriviamo il testo (ho usato un Trebuchet Ms da 25px) ed il gioco è fatto. 

Altre applicazioni

Con questo tipo di pulsanti si potrebbe facilmente creare un menu orizzontale a tab

Edit: il risultato di questo tutorial non mi è piaciuto tanto. Il tutorial sui pulsanti stile glossy è sicuramente migliore ;) 

Discuti di questo articolo sul forum. (0 posts)