Il seguente markup HTML:
<button type="button">Sono un pulsante generico</button>
produce questo risultato:
Utilizzando il markup dell'esempio precedente, assegnamo al pulsante qualche dichiarazione CSS
<button type="button">Sono un pulsante generico</button>
Ora scriviamo il css per la classe button_style
button{ width:200px; height:35px; background-color: transparent; color: #fff; font-family: Helvetica, Arial, sans-serif; font-size: 14px; background-image: url("../images/button_bg.png"); border:0; }
E aggiungiamo qualche altra riga di CSS per creare un effetto rollover e un effetto al click del mouse
button:hover{ background-image: url("../images/button_hover.png"); } button:active{ background-image: url("../images/button_active.png"); }
Otterremo questo risultato:
Utilizziamo ancora il markup dell'esempio precedente, aggiungendo l'attributo evento onclick e un piccolo javascript in linea
<button type="button" onclick="alert('Ciao')">Sono un pulsante con script</button>
Otterremo questo risultato: