Inserire una immagine in un bottone HTML

Vediamo come inserire una immagine all’interno di un bottone HTML. Per fare questo dobbiamo usare i Fogli di stile: in sostanza andiamo a creare una classe per il nostro bottone con le seguenti caratteristiche:

<style>
.bottone {
  width: 120px;
  height: 50px;
  background-color: #FF0000;
  background-image: url('immagine.gif');
  background-repeat: no-repeat;
  background-position: center center;
}
</style>

Vediamo insieme le proprietà del nostro foglio di stile:

• width e height stabiliscono le dimensioni (in pixel) del nostro bottone;
• background-color determina il colore dello sfondo del bottone;
• background-image setta la url dell’immagine che verrà inserita nello sfondo del nostro bottone;
• il valore "no-repeat" nella proprietà "background-repeat" dici al browser di non ripetere l’imagine qualora il bottone fosse più grande dell’immagine stessa;
• con background-position abbiamo infine stabilito che l’immagine debba essere centrata.

Ora non ci resta che richiamare la classe all’interno del bottone, in questo modo:

<input type="button" class="bottone">