Input type="image" mit css image-hover ohne javascript

Nachdem ich lange nach einer Lösung im Internet gesuch, wie man ein Image-hover mit css, also OHNE javascript, für den Tag <INPUT type="image" > macht, und nix passendes gefunden, habe ich andere Methode "entdeckt".

Und zwar:
1. Machen wir ein sogenanntes 0-Image oder hier herunterladen.
2. Schreiben wir folgende CSS-Classe:

.button
{
   background:url(../images/btn_28x21.gif) no-repeat;
   width:28px;
   height:21px;
}
.button:hover
{
    background:url(../images/btn_hover_28x21.gif) no-repeat;
}

3. Basteln wir den input-tag:

<input type="image" class="button" src="0.gif" />