CSS  »  Articoli  »  Effetti con CSS 

Questa è la traduzione dell'articolo Shiny Happy Buttons di John Allsopp pubblicato originariamente su 24 Ways il 18 dicembre 2008.

Da quando Mac OS X ha fatto la sua comparsa sui nostri schermi, i bottoni con stile glossy, translucidi, scintillanti sono stati quasi di rigore e, insieme agli effetti con i riflessi e agli angoli arrotondati, sono diventati una sorta di cliché del design in stile Web 2.0. In questo piccolo mio contributo per il calendario dell'avvento prenderemo un classico, noioso bottone HTML per dargli una rinfrescata in stile 2.0.

Ma, e qui viene il bello, non useremo nessuna immagine, né nell'HTML né nel CSS. Niente sliding doors, niente image replacement o altre tecniche simili. Solo e soltanto CSS, CSS3 e un pizzico di CSS sperimentali. Saremo compatibili con quasi tutti i browser (sebbene con un po' di progressive enhancement per quanti adoperano ancora browser non di ultimissima generazione).

La parte HTML

Iniziamo con il codice HTML:

<button type="submit">This is a shiny button</button>

Ok, non è certamente un bottone scintillante, ma lo diventerà.

Prima di applicare gli stili si presenta così.

Ironicamente, a seconda del sistema operativo e del browser che usate, potrebbe già sembrare un bottone molto accattivante, ma non è questo il punto. Noi vogliamo trasformarlo in qualcosa di 2.0 e davvero splendido. Il nostro obiettivo è far sì che diventi così:

Figura 1 - Bottone finale

Tenete da subito in mente che a seconda del browser che state usando potreste vedere meno effetti CSS di quelli applicati per creare il bottone. Al momento in cui scrivo questo articolo, solo su Safari tutti gli effetti sono supportati.

Dando un'occhiata al prodotto finito, ecco cosa abbiamo fatto:

1. Abbiamo dato al bottone un po' di padding e una larghezza definita.
2. Abbiamo cambiato il colore del testo e abbiamo dato al testo un'ombreggiatura (text-shadow).
3. Abbiamo assegnato al bottone un bordo.
4. Abbiamo arrotondato gli angoli.
5. Abbiamo dato al bottone un'ombreggiatura.
6. Abbiamo assegnato al bottone uno sfondo con effetto gradiente.

E ricordate, tutto senza usare alcuna immagine.

Altri articoli

Altre guide

Altre newsletter