Impostare Bottoni con Rollover

In questo appuntamento riprenderemo le basi della tecnica, presentando
un semplice esempio, costituito da un solo link.
Si tratta di un ottimo modo per rendere graficamente piacevole un link
importante della pagina, quei link che veicolano funzionalità del tipo:

• Iscriviti gratis
• Registrati ora
• Richiedi informazioni
• Richiedi un preventivo
• Maggiori dettagli
• Inizia il tour
• Ordina il prodotto
• Procedi con la registrazione
• Conferma l’ordine

In generale si tratta quindi di link presenti nei siti che offrono prodotti
e/o servizi, e un singolo link ben visibile e ben presentato può fare la differenza
determinare, o quanto meno favorire, il click da parte dell’utente.

Esempio di base

Cominciamo così presentando l’esempio di base,
un semplice link-bottone con grafica e CSS. Il markup è il più semplice possibile:
si tratta di un solo link con class="button", che potrà essere
inserito come ultimo elemento di un paragrafo oppure all’interno di un div, come
nel caso dell’esempio. 

Il CSS è costituito da due sole regole: una per lo stato normale del link,
e uno per lo stato :hover. In sostanza si tratta di:

• Rendere il link display:block così da potergli attribuire le dimensioni
• Eliminare la sottolineatura tipica dei link
• Assegnare le proprietà del testo e centrarlo
• Definire colore del testo e immagine di sfondo

In fase :hover basterà definire un colore del testo più acceso, così da
accompagnare il passaggio del mouse. Vediamo per intero le due regole:

Da evidenziare che per la centratura orizzontale è bastato dichiarare
text-align:center, mentre per quella verticale è sufficiente
specificare l’altezza di linea nello shorthand font
(indicata da /35px nel codice sopra) pari all’altezza del link.

Bastano una semplice immagine e due sole regole CSS per rendere accattivante il
nostro link-bottone. Ma si può fare di più, rendendolo ancora più piacevole e funzionale
grazie al rollover.

l principio su cui si basa il fast CSS rollover è semplice ed efficace: in sostanza
si combinano i due stati del link in un’unica immagine e si agisce sulla posizione
dell’immagine di sfondo ottenendo così un rollover istantaneo senza la necessità
di caricare un’immagine aggiuntiva per la transizione sul passaggio sulla fase :hover.

Nel caso dell’esempio le due porzioni dell’immagine
sono ciascuna 145 per 35px, basterà traslare quindi in fase hover verso l’alto
l’immagine di background. Ecco le due regole CSS:

Da notare le due coordinate del background-position sulla seconda
regola: il primo numero (lo zero) indica la posizione sull’asse orizzontale, mentre
il secondo quella verticale. Un valore negativo corrisponde ad una traslazione verso
l’alto, che mostrerà quindi in fase :hover la porzione di immagine corrispondente.