Nei moduli mettere delle immagini al posto del classico bottone d’invio non è niente di complicato, si puo’ mettere semplicemente il campo input con il type=”image” oppure impostando tramite il CSS una immagine di sfondo per un type=”button”, questa immagine però dovrebbe essere di dimensioni precise oppure ripetuta per tutto lo sfondo del pulsante, nel primo caso potremo creare una immagine come vogliamo ma dovremo sapere la lunghezza del testo che ci va dentro, nel secondo caso dovremo fare una immagine che si possa usare come sfondo ripetuto.
A volte però potrebbe venire la “necessità” di creare dei bottoni con testo di varia lunghezza e graficamente più ricercati, potremo creare una immagine per ogni bottone (ma questo potrebbe diventerebbe un’operazione un po’ lunga) oppure possiamo cercare una via di mezzo… vediamo come.Questo esempio parte dalla necessità di creare un bottone arrotondato, senza però dover creare un’immagine per ogni bottone, l’esempio mescola delle tecniche CSS usate in altri elementi XHTML, quindi nulla di (tanto) nuovo sotto il sole, anche se devo dire che in rete non ho trovato articoli che spiegassero questa possibilità per i bottoni, ecco quindi la ragione di questo articolo.

Per cominciare voglio ottenere l’effetto che vedete qui sotto, un bottone con degli angoli arrotondati

Per ottenere questo risultato uso:
un tag “button”
due “span” dentro il button
due immagini che formano il pulsante (in realtà sono 6 ma di base ne bastano 2)

Per prima cosa dobbiamo ipotizzare il testo più lungo che andremo a inserire nei nostri pulsanti e valutare quale potrebbe essere la sua lunghezza reale in pixel, e questo dipende molto dal font usato e della sua dimensione. Questo serve per realizzare la prima parte del lavoro, l’immagine.

L’immagine di sfondo

Per il mio esempio prevedo dei pulsanti al massimo di 200px, quindi creo una immagine di 200X30 px, poi questa immagine la divido in due, una che comprende solo la parte rotonda del lato sinistro e l’altra che comprende tutto il resto.

L’xhtml

Nel codice xhtml uso l’elemento <button></button> dentro al quale inserisco due <span>, uno annidato all’altro e dentro quello più interno inserisco il testo che desidero mettere a quel bottone, di preciso:

<button type=”submit” name=”invio” title=”Invia la mail“>
<span class=”bottone_sx“>

<span class=”bottone_dx”>
Invia la mail a un tuo amico

</span>
</span>
</button>
Con questo codice avrò un pulsante di questo tipo

Purtroppo i browser meno moderni (tipo Explorer 7) utilizzare questo sistema crea qualche problema se il pulsante è composto da più di una parola, in questo caso le parole successive alla prima vengono messe a capo, per ovviare a questo è necessario aggiungere tra una parola e l’altra il " ” (non-breaking space) che non permette il ritorno a capo delle parole, quindi il testo diventa:
“Invia&nbsp;la&nbsp;mail&nbsp;a&nbsp;un&nbsp;tuo&nbsp;amico”

Ora dovrò formattarlo tramite il CSS…

CSS

Nel css per prima cosa vado a togliere il margine, il bordo e il background che il pulsante “button” ha di default, imposto un puntatore a forma di mano per dare un effetto più intuitivo:

button{
width: auto;
margin: 0px;
padding: 0px;
border: 0px;
background: none;
cursor: pointer;
}

Ora vado a impostare la classe dello <span> più esterno (che occupa lo spazio di sinistra)

button span.bottone_sx{
height: 30px;
padding: 0px;
margin: 0px;
border: 0px;
display: block;
background: url(immagini/bottone_form_sx.png) no-repeat left center;
cursor: pointer;
}
Per finire imposto lo <span> interno (che occupa lo spazio di destra)

button span.bottone_dx{
height: 30px;
line-height: 30px;
background: url(immagini/bottone_form_dx.png) no-repeat right center;
border: 0px;
padding: 0px 15px 0px 8px;
margin: 0px 0px 0px 7px;
font-size: 11px;
cursor: pointer;
display: block;
}

Se si vuole si potrebbe fermare qui, in questo modo il pulsante è già in “formato immagine”, ma si puo’ fare di più. Inseriamo un effetto hover.
Nel hover vado semplicemente a cambiare le due immagini che formano il pulsante.

button:hover span.bottone_sx{background: url(immagini/bottone_form_sx2.png) no-repeat 0px center;}
button:hover span.bottone_dx{background: url(immagini/bottone_form_dx2.png) no-repeat right center;color: white;}

E si puo’ aggiungere ancora un altro effetto, si puo’ cambiare lo sfondo anche quando si preme il pulsante. Per questo effetto ho messo come immagine di sfondo una gif animata che da un effetto di “azione”.

button:active span.bottone_sx{background: url(immagini/bottone_form_sx3.gif) no-repeat 0px center;}
button:active span.bottone_dx{background: url(immagini/bottone_form_dx3.gif) no-repeat right center;color: white;}

In questo caso per evitare che al primo hover dell’utente ci sia un ritardo nel caricamento delle immagini di sfondo, ho messo un preloader immagini in javascript nel header della pagina, ho usato questa soluzione in quanto ho voluto mettere una gif animata, se avessi usato un effetto senza “animazione” avrei potuto creare una singola immagine contenente tutti i tre stadi del pulsante, gestendola poi con il posizionamento dello sfondo (background-position), in questo modo non avrei avuto bisogno di un preloader.

Qui potete vedere un esempio completo di questa tecnica.

Questa tecnica (al di là degli <span>) lascia il pulsnate pulito senza contenuti grafici, che vanno definiti soltanto nel css.
Probabilmente tecniche di questo tipo potrebbero diventare vecchie con l’avvento dei CSS3, sempre più supportato dai browser (quasi tutti).