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:

<a href="#" target="_self"><span>Testo del bottone</span></a>

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

a.button {
background: transparent url(bg_button.gif) no-repeat scroll
top right;
font: bold 12px arial, sans-serif;
float:left; /* la proprietà float è necessaria, può essere settata
anche in right*/
height: 24px;
margin:15px 0 0 0;
padding-right: 18px; /* sliding doors padding */
text-decoration: none;
}

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

a.button span {
background: url(bg_button.gif) no-repeat;
display: block;
line-height: 14px;
padding: 5px 0 5px 18px;
color: #FFF;
}

Per modificare il comportamento al mouse-over:

a.button:hover {
background-position: bottom right;
color: #000;
outline: none; /* hide dotted outline in Firefox */
color: #FFF;
font-weight:bold;
}

a.button:hover span {
background-position: bottom left;
padding: 6px 0 4px 18px; /* push text down 1px */
color: #FFF;
font-weight:bold;
}

Potresti essere interessato anche ai seguenti articoli:

1. CSS: immagine di sfondo a tutto schermo
2. Cheat Sheets per il Web Design