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">Pubblicitร
