Nessun risultato. Prova con un altro termine.
Guide
Notizie
Software
Tutorial

Bottoni di submit a tre stati

Due esempi per rendere graficamente accattivanti con i CSS i pulsanti di submit
Due esempi per rendere graficamente accattivanti con i CSS i pulsanti di submit
Link copiato negli appunti

Abbiamo parlato di link-bottoni negli articoli Bottoni con rollover e Bottoni con rollover
flessibili
. In questo appuntamento ci occuperemo invece del più classico dei pulsanti: quello di submit.
Attraverso due semplici esempi vedremo come sia possibile ottenere bottoni
a tre stati, ovvero fase normale, :hover e :active (pulsante premuto). Cominciamo subito.

Un bottone semi-grafico a tre stati

Eccoci al primo esempio. Riporto qui uno screenshot del
bottone nei tre stati su Opera:

Figura 1 - I tre stati del bottone
I tre stati del bottone

Cominciamo dal markup: si tratta di un semplicissimo pulsante di submit.
Ecco l'HTML:

<button type="submit">registrati</button>

Qualora ci fosse la necessità di più di un bottone per pagina e con presentazione
differente, si potrà attribuire a ciascuno un id univoco così da differenziarli.

Per ciò che riguarda la grafica dell'esempio, si è usata un'unica immagine di sfondo che combina i tre stati:

Figura 2 - L'immagine di sfondo usata nell'esempio
Immagine di sfondo

Si interverrà poi sulla posizione dello sfondo
con la proprietà CSS background-position così da mostrare
la porzione corrispondente allo stato del bottone.

Vediamo il CSS dell'esempio per intero:

button{width: 120px;height: 35px;
    border: 0;cursor: pointer;text-align:center;
    font:bold 20px/35px "Trebuchet MS",Arial,sans-serif;
    background: #55CB00 url(base.png) no-repeat 0 0;color:#FFF}
button:hover{background-position: 0 -35px;color: #FFC}
button:active{background-position: 0 -70px;color: #FFF}

Nella prima regola vengono definite le proprietà per il bottone. Per prima
cosa si elimina il bordo (fondamentale per una buona resa cross-browser),
vengono specificate le dimensioni, viene impostato il cursore a manina e definito il font. A questo
proposito c'è da notare che il line-height specificato nello shorthand font
è impostato proprio sul valore dell'altezza.

Viene specificata poi l'immagine di sfondo e si imposta il colore del testo.
Cosa importantissima è attribuire anche un colore di sfondo che
sia sufficientemente in contrasto con il testo, così
da rendere quest'ultimo leggibile anche con le immagini disabilitate.
Infine, nelle due fasi aggiuntive, ovvero :hover e :active,
viene semplicemente spostato lo sfondo così da mostrare la porzione
d'immagine relativa.

Il nostro esempio è così ultimato e ha una buona
compatibilità. Non ha problemi di resa su IE dalla versione 5 alla 7, oltre
che su Firefox, Opera e Safari 3. Qualche inconsistenza visiva si riscontra invece su Safari 2, un browser notoriamente fonte di problemi quando si tratta di intervenire con i CSS su pulsanti ed elementi di form (problemi comunque risolti nelle più recenti versioni di Webkit, il motore di rendering alla base del browser di Apple).

Su Firefox, Opera e Safari 3 è possibile beneficiare dei tre stati, mentre su IE fino alla versione
6 verrà mostrato solo lo stato normale e su IE7 solo quello normale
e quello :hover.

Un bottone grafico a tre stati

L'evoluzione naturale del primo esempio
consiste nell'ottenere un bottone totalmente grafico a tre stati che sia
facilmente personalizzabile. Ecco quindi il secondo esempio
in cui anche il testo del bottone è incorporato nella grafica.
Riporto di seguito l'unica immagine di sfondo usata:

Figura 3 - L'immagine di sfondo usata nel secondo esempio
Immagine di sfondo

Pur avendo già incorporato l'informazione testuale nell'immagine di sfondo,
quello che vorremmo ottenere è disporre di un markup che ci consenta una buona fruibilità
con CSS e/o immagini disabilitate e tale da rendere il bottone accessibile anche
su dispositivi mobili e screen reader. La scelta sul markup è, nel
caso dell'esempio, dettata proprio da questo requisito fondamentale:

<button type="submit"><span></span>iscriviti</button>

Come si può notare c'è uno span vuoto che precede il testo del bottone.
Tale elemento non compromette i contenuti e non ha alcun valore semantico,
ma è essenziale per la realizzazione dell'esempio.
Ci serviremo infatti di una tecnica di image replacement, ovvero la
Cover-up Span di cui abbiamo parlato nell'articolo Image Replacement: le tre tecniche migliori.

In sostanza, si tratta di coprire il bottone con
lo span al suo interno attraverso i posizionamenti assoluti.
In questo caso, quindi, l'immagine di sfondo verrà attribuita allo span
e la sua posizione verrà modificata attraverso l'uso del selettore discendente
sui due stati del bottone. Ecco il CSS dell'esempio per intero:

button{position:relative;width:120px;height:35px;
    border:0;background: #55CB00;color: #FFF}
button span{position:absolute;top:0;left:0;
    width: 120px;height: 35px;cursor: pointer;
    background: url(base2.png) no-repeat 0 0}
button:hover span{background-position: 0 -35px}
button:active span{background-position: 0 -70px}

Il CSS risultante è piuttosto breve e non contiene hack e workaround,
a fronte di una compatibilità pari a quella del primo esempio.

Conclusioni

Abbiamo visto in questo articolo due possibili esempi di personalizzazione
dei bottoni di submit. Alcuni piccoli accorgimenti da tenere presenti
se vorrete implementarne di simili: non dimenticare
di specificare anche il colore di sfondo e, nel caso di bottoni
totalmente grafici, assicurare una buona leggibilità. Qualora
ci fosse la necessità di più bottoni è indispensabile identificarli
attraverso l'attributo id da usare anche nel CSS.

La compatibilità dei due esempi, come accennato, è buona. Non mancano purtroppo
i limiti. Il primo, e mi riferisco al primo
esempio in particolare, è la necessità di attribuire una larghezza
determinata anche per bottoni testuali. Si tratta di un limite
superabile ma che richiede forse troppo sforzo e un CSS complesso
più del dovuto per ottenere una buona compatibilità cross-browser.
Rimando a tal proposito a Styling the Button Element with Sliding Doors.

Un altro limite consiste nella mancanza delle due fasi grafiche aggiuntive (:hover e :active)
su IE fino alla versione 6 e della fase :active in IE7. Ciò è
dovuto al mancato supporto di queste pseudo-classi sui bottoni
in questi browser. Si potrebbe risolvere solo attraverso
l'impiego di Javascript (magari da inserire
nella pagina attraverso un commento condizionale). Ma a parer mio potrebbe non valerne
la pena.

Codice e immagini dei due esempi visti sono disponibili per
il download. Alla prossima.

Ti consigliamo anche