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:
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:
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:
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.
