Esempi di utilizzo del Tag HTML <button>

Esempio 1

Realizziamo un pulsante generico

Il seguente markup HTML:

<button type="button">Sono un pulsante generico</button>
        

produce questo risultato:

Sono un pulsante generico

Esempio 2

Usiamo i css per personalizzare l'aspetto del pulsante

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:

Sono un pulsante con stile

Esempio 3

Aggiungiamo l'attributo evento onclick per mostrare un messaggio

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:

Sono un pulsante con script