Tipi di bottoni per siti web e pulsanti HTML più belli con CSS3

C'è un ambito nel design delle interfacce per il web che si dimostra ideale per l'applicazione delle proprietà più interessanti dei CSS3: la realizzazione di bottoni. Grazie a queste proprietà possiamo dire davvero addio alle tecniche tradizionali, quelle che per la creazione di pulsanti esteticamente accattivanti o realistici ricorrevano necessariamente all'utilizzo di immagini.

Il nostro punto di partenza sarà questo, un semplice elemento button privo di qualunque formattazione: (esempio 1):

<button id="pulsante">Push me!</button>

Dopo aver ricordato che come base per il pulsante avremmo potuto usare anche elementi come a o input, possiamo procedere.

CSS e bottoni: stili di base

Prima di applicare le proprietà CSS3, prepariamo il terreno creando una serie di regole di stile di base. È un passaggio importante, anche perché andiamo di fatto a definire l'aspetto del bottone su quei browser che non supportano le proprietà CSS3 che useremo di qui a poco. Ecco il codice:

#pulsante {
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;
}

Con outline: none rimuoviamo il contorno (tipicamente una linea tratteggiata) associato ai link e ai pulsanti quando sono attivi. Impostiamo il cursore perché assuma la tipica forma della manina (pointer) quando passiamo con il mouse sul bottone.

Centriamo il testo, rimuoviamo da esso qualunque tipo di decorazione, definiamo le proprietà di base per font e colore, aggiungiamo del padding e un sottile bordo, concludendo con la dichiarazione con cui settiamo il colore di sfondo.

Il risultato (esempio 2) è visibile in anteprima nello screenshot qui sotto:

Colorare lo sfondo con i gradienti lineari - CSS webkit gradient

Per dare un tocco di profondità e 'realismo' al nostro pulsante possiamo passare da uno sfondo con colore solido ad uno con un gradiente lineare.

I gradienti sono una delle proprietà CSS3 più promettenti, c'è da stare certi che con l'avvento della versione 10 di Internet Explorer che li supporta nativamente diventeranno un tool fondamentale nella cassetta degli attrezzi di ogni designer. Già oggi, comunque, grazie al supporto di tutti gli altri principali browser, possiamo apprezzarne la versatilità e le potenzialità.

Per il nostro bottone abbiamo usato questo codice (esempio 3):

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);

La sintassi (per i dettagli si rimanda alla lezione della guida CSS3) è decisamente verbosa, ma purtroppo al momento i gradienti sono supportati solo con estensioni proprietarie per i vari browser. Nell'ordine:

1. Safari fino alla versione 5.0 e Chrome fino alla versione 9.0
2. Safari 5.1+ e Chrome 10.0+
3. Firefox 3.6+
4. Opera 11.10+
5. IE 10.0+

Non abbiamo indicato il codice alternativo, basato sui filtri proprietari di Microsoft, per le versioni di IE precedenti alla 10. Il metodo migliore per implementare su quei browser questa e altre proprietà di cui parleremo più avanti è affidarsi a CSS3Pie, per il cui uso rimandiamo all'articolo di Marco Pontili.

Giunti a questo punto il risultato è il seguente:

Arrotondare gli angoli del bottone

Dopo aver applicato le regole CSS di base, il pulsante ha mutato forma. Siamo passati dall'aspetto di default dipendente dall'accoppiata browser/sistema operativo ad un rettangolo. Ma tipicamente, per dare ai pulsanti un aspetto più 'realistico', si è soliti arrotondare gli angoli. È giunto quindi il momento di fare ricorso alla proprietà border-radius.

Nell'esempio 4 l'arrotondamento è leggero, pari a 8px:

Ecco il codice:

-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border-radius: 8px;

Se vogliamo un aspetto più tondeggiante, basterà incrementare il valore (esempio 4 bis):

-moz-border-radius: 20px;
-webkit-border-radius: 20px;
border-radius: 20px;

Con questi esiti:

Ombreggiatura

Per dare 'profondità' all'aspetto del pulsante è fondamentale ricorrere ad un'ombreggiatura, nulla di eccessivo bastano pochi pixel. Ovviamente, ci affidiamo a box-shadow (esempio 5):

-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);

Impostiamo su 0 lo spostamento dell'ombra sull'asse orizzontale, su 1px quello sull'asse verticale, su 3px il valore della sfocatura. Per il colore usiamo una notazione RGBa: è fondamentale, perché grazie al canale alfa l'ombra si adatterà alla perfezione su qualunque sfondo, a prescindere dal colore, anche su quelli a pattern. Nel nostro caso siamo partiti da un nero (0, 0, 0) reso semitrasparente (0.5).

Ancora uno screenshot per fare il punto della situazione:

Impostare l'aspetto per lo stato :hover

Giunti a questo step, non ci resta che passare a definire l'aspetto del pulsante nel momento in cui interagiamo con esso. Iniziamo con lo stato di :hover.

Gli effetti possono essere i più disparati e creativi. Si può, per esempio, ricorrere a proprietà CSS3 avanzate come transizioni o animazioni, ma in questo caso ci manteniamo sul semplice.

Nell'esempio 6, quando si passa il mouse sul pulsante, invertiamo i colori del gradiente, facendo passare la parte più scura nella sezione superiore del bottone. Il codice dovrebbe essere intuitivo, dal momento che si tratta di invertire la posizione dei valori definiti in precedenza per i colori del gradiente:

#pulsante: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);
}

Se invece che un gradiente vogliamo sull'hover un colore solido basterà operare così (esempio 6 bis):

#pulsante:hover {
background: #0078a5;
}

Impostare l'aspetto per lo stato :active

Non ci rimane che passare allo stato :active, ovvero all'aspetto del pulsante quando viene premuto. Per ricreare il tipico 'effetto pressione' ci basta spostare verso il basso di appena 1px la posizione del pulsante (esempio 7):

#pulsante:active {
position: relative;
top: 1px;
}

Dimensioni del pulsante

Nel corso del tutorial non abbiamo in alcun punto accennato alle dimensioni del bottone. Si può naturalmente fare ricorso alla proprietà width, ma è anche possibile sfruttare la dimensione del testo per scalare proporzionalmente la dimensione dell'intero elemento. Nell'ultimo esempio siamo passati da 12px a 18px:

Fatto! Tutti gli esempi sono disponibili per il download.