Hogyan lehet megoldani, hogy a button helyén egy kép jelenjen meg? (Form)

<input type=”image” src=”gomb.jpg” alt=”ez egy gomb” border=”0” />

type="submit" helyett image, aztán src="a_kep_neve.jpg"

IItt egy konkrét példa, amit én használok.

Fekete gomb, és ha ráviszem piros lesz, 1 px, fekete kerettel.

.button {

padding: 3px 5px;

border: 1px solid #333333;

background: url(../images/grad1.gif) repeat-x top #333333;

color: #CCCCCC;

font-size: 85%;

text-transform: uppercase;

}

.button:hover, .button:focus {

border: 1px solid #999999;

padding: 3px 5px;

border: 1px solid #333333;

background: url(../images/grad4.png) repeat-x top #333333;

color: #CCCCCC;

font-size: 85%;

text-transform: uppercase;

}

Persze ez minden buttonomra érvényes, azért használom repeat-x el, mert különböző méretűek a gombok.