paitadesignblog

HTML, CSS e tutto il resto

CSS: Bottoni espandibili con una sola immagine

Questa tecnica è ottima se dobbiamo creare dei bottoni che siano pronti per essere utilizzati con testi diversi, cioè che siano liquidi in orizzontale (si adattino cioè alla lunghezza del testo inserito).

In più vogliamo utilizzare il minor numero di immagini possibile (tecnica della “sprite image” e “sliding door”), avere codice più semantico possibile, e avere la possibilità di bordi arrotondati.

Ecco la pagina di esempio.

Esempio css bottoni espandibili con una sola immagine

Ed ecco il listato html:

Ecco come settare il css:

1) al link associamo come background l’immagine, posizionata a destra (attenzione: non è possibile utilizzare questa tecnica con immagini png):

2) allo span associamo come background l’immagine, che si posizionerà normalmente a sinistra:

Per modificare il comportamento al mouse-over: