Bottoni con rollover flessibili

Nel recente articolo Bottoni con
rollover abbiamo visto una semplice tecnica per ottenere link-bottoni accattivanti.
In chiusura d'articolo ho evidenziato però il problema della soluzione proposta, ovvero
una scarsa flessibilità grafica e la necessità di preparare immagini a misura tale da contenere
il testo. Un secondo difetto della tecnica proposta è il testo dimensionato in pixel,
che rende la soluzione ancora meno flessibile.

In questo appuntamento vedremo come sia possibile superare queste due limitazioni
attraverso diversi esempi. Cominciamo subito.

Bottoni flessibili con rollover

Eccoci quindi al primo esempio che accompagna
l'articolo. Per prima cosa, vediamo il markup:

Da notare che all'interno del link c'è un elemento span:
semanticamente non ha influenza sulla pagina, ma è indispensabile per ottenere
la flessibilità degli esempi di questo articolo.

A questo punto vediamo la grafica per l'esempio:
si tratta di un'unica immagine larga 350 pixel e alta 70, che è composta dai due stati
grafici del bottone:

Si potrebbe pensare che l'immagine di sfondo dell'esempio sia più larga del
dovuto, ma è per garantire che sia in grado di contenere un testo sufficientemente
lungo: in effetti, dell'immagine si useranno solo le parti utili. L'immagine
seguente aiuterà a capire la costruzione grafica dell'esempio:

Per lo stato normale, al link viene attribuita la parte superiore sinistra dell'immagine,
insieme ad un padding sinistro, mentre allo span viene assegnata la parte superiore
destra dell'immagine, insieme ad un padding destro. Ciò permette di far sì che l'immagine si
adatti al testo al suo interno, garantendo un effetto di continuità tra i due sfondi assegnati
al link e allo span. Per quanto riguarda il rollover, la costruzione è identica: solo che
verrà usata la porzione inferiore dell'immagine, che riproduce lo stesso bottone ma in
diverso colore.

Siamo quindi pronti a procedere con il CSS dell'esempio:
la costruzione grafica appena vista ce ne suggerisce l'implementazione. Si tratta in sostanza
di definire quattro regole: per i link e gli span in stato normale e in stato :hover.

Cominciamo dai link: per poter far sì che assumano la larghezza necessaria a contenere
il testo al loro interno, più il padding laterale, la cosa fondamentale da fare è renderli
float. In questo modo vengono automaticamente promossi a elementi block-level,
e si potrà assegnare loro un'altezza di 35 pixel. Viene poi assegnato un padding sinistro
di 18px, il font (insieme al line-height di 35px così da centrare il testo al loro interno),
l'immagine di sfondo e le proprietà sul testo:

Ora gli span: basterà renderli block-level, assegnare un padding
sinistro e l'immagine di sfondo.

Infine le due regole per il rollover: si agirà sul colore del testo
dei link e sulla posizione dell'immagine di sfondo di link e span,
svelando quindi la porzione inferiore dell'immagine:

Il nostro esempio è così ultimato:
sono bastate una sola immagine e quattro semplici regole. Ora si tratta
però di integrarlo nel design di una pagina: scopriremo che c'è
ancora qualcosa da fare per renderlo perfetto.

Contenere il bottone

Per questioni di design, e soprattutto per avere una larghezza adattabile
al contenuto, abbiamo reso float il bottone del primo esempio.
Integrare il bottone dell'esempio appena visto in una pagina può risultare difficile,
dato che l'elemento successivo nell'ordine naturale della pagina si disporrà
accanto ad esso subendo l'effetto del float.

Ecco quindi il secondo esempio, in cui
vengono mostrati diversi bottoni, ciascuno dei quali è auto-contenuto.
Ecco il codice HTML di un bottone:

Si è reso quindi necessario racchiude ciascun bottone in un div class="button-cont",
atto proprio a contenerlo. Basta a questo punto usare la tecnica Simple Clearing of Floats
di cui ho parlato in questa pagina
dell'articolo Float: teoria e pratica.
Ecco quindi la regola aggiuntiva:

In sostanza, rendendo float il div che contiene il bottone, e con una larghezza pari
al 100%, lo si forza a contenere gli elementi float al suo interno. Il resto del CSS,
e in particolare le regole sul bottone, sono identiche a quelle del primo esempio.

Tre piccoli appunti sono necessari. È ovviamente possibile allineare il bottone
alla destra del suo contenitore: basterà renderlo float: right anzichè
float: left.

La seconda considerazione riguarda l'implementazione dell'esempio.
Nell'HTML la classe "button" sul link è superflua, dato che è possibile usare il selettore discendente,
risparmiando codice nell'HTML e nel CSS. La regola che usa il selettore a.button
dovrà quindi utilizzare il selettore div.button-cont a.

Infine, una nota sui margini che eventualmente si vorranno assegnare al bottone. Internet
Explorer 6 soffre di un bug denominato doubled-margin bug che raddoppia i margini
concordi con un elemento float di cui ho parlato in
questa pagina.
Basterà dichiarare il link display: inline per risolvere, senza effetti collaterali.

Un bottone centrato

Abbiamo visto come sia possibile ottenere bottoni flessibili, e come sia possibile
allinearli a sinistra (come nel caso degli esempi) o a destra (usando float: right
anzichè float: left). In certi casi può però venir utile ottenere un bottone
centrato, vediamo con il terzo esempio come sia possibile.

L'immagine di sfondo è la stessa usata nei due esempi precedenti; il markup
è lo stesso del secondo esempio, che riporto per comodità:

Il CSS è molto simile a quello dei due esempi precedenti... si tratta in
questo caso però di:

• Centrare il testo all'interno del div class="button-cont"
• Rendere display: block esplicitamente sia il link che lo span
• Dichiarare una larghezza empirica per il bottone (meglio in em, così
  da mantenere scalabilità con il ridimensionamento del font)
• Impostare i margini orizzontali del link sul valore auto così
  da centrare il bottone.

Questi i quattro passi essenziali, ecco quindi il CSS dell'esempio
per intero:

Da notare che la dichiarazione text-align:center ha una duplice funzione:
quella di centrare il testo del bottone e centrare il bottone stesso sulle versioni di Internet
Explorer precedenti alla 6. Ed è proprio per IE, incluse versioni 6 e 7,
che è necessaria la dichiarazione cursor: pointer per assegnare il
tipico cursore "a manina" sul bottone.

Infine, in questo ultimo esempio il padding è stato dimensionato in em,
in accordo con l'unità di misura utilizzata per la larghezza del bottone. Ed è
proprio la larghezza che si dovrà assegnare al link una delle limitazioni di
questo esempio rispetto agli altri due, ma consente comunque la scalabilità
al variare del font-size. Per assegnarla in em, basterà tener presente che
1em equivale al font-size attuale, ed è in grado di contenere all'incirca due lettere.

Questo è tutto per ciò che riguarda il terzo esempio: rivediamolo.

Conclusioni e download

Si conclude qui questa seconda parte dedicata ai bottoni con rollover,
in cui le idee presentate nella prima parte
sono state espanse non di poco. Gli esempi qui presentati sono stati testati
con successo sulle versioni di Internet Explorer dalla 5 alla 7, oltre che sulle ultime versioni
di Opera, Firefox e Safari.

Per ciò che riguarda il terzo esempio: se vorrete ottenere un bottone simile,
mi raccomando alla resa su
IE5 e IE5.5, visto l'implementazione errata del box model. Una lettura
indispensabile nel caso doveste avere problemi è Box Model e Workaround
sul blog. Ed è proprio sul blog, in questo post,
che si possono trovare alcuni spunti e risorse per la grafica dei bottoni.

Esempi e immagini di questo articolo sono disponibili per il download. Alla prossima.