Mouseover bei Submit und Reset mit CSS

von Thomas Salvador.

In "MouseOver für Submit und Reset" wurde gezeigt, wie für die Absende- und Lösch-Button eines Formulars einen MouseOver-Effekt erzeugt.

Dies erforderte seinerzeit noch einen Trick, bei dem die normalen Button durch Bilder ersetzt wurden, die einen MouseOver-Effekt hatten. Das Funktionen der Buttons wurde dort ebenfalls über Javascript getrieben.

Die hatte natürlich den Nachteil, dass das Formular ohne JavaScript nicht mehr funktionierte.

Hier nun finden Sie einen MouseOver-Effekt, der den Submit-Button mit einem MouseOver-Effekt ausstattet und kein Javascript benötigt. Er ist mit CSS realisiert.

Sollte ein Besucher tatsächlich noch einen Browser verwenden, der das nicht versteht, verliert er den MouseOver-Effekt, kann das Formular aber dennoch nutzen.

Der Effekt ist dennoch ein Trick.

Die Button werden neu formatiert in der Form, dass ein Bild (genauer ein Hintergrundbild) platziert und der eigentliche Button aus dem Sichtbereich geschoben wird. Allerdings interagiert man mit dem Bild ganz normal. Er hat die Button-Funktion.

Bei selbst gesetzten Bildern kann man nun den MouseOver-Effekt erzeugen, indem die Pseudoklasse :hover genutzt wird und hier das Bild austauscht.

Im übrigen bin ich inzwischen der Meinung, dass Formulare keinen Lösch-Button benötigen und auch nicht anbieten sollten. Warum sollte der Besucher diesen nutzen? Er braucht das Formular doch einfach nicht zu senden.

Hingegen könnte der Besucher aus Versehen auf den Löschbutton klicken, wenn er absenden möchte. Das wäre ärgerlich.

Dennoch können natürlich beide Button genutzt und auch mit dem Effekt ausgestattet werden.

Der Source

<html>
<head>
<title>Beispiel zu MouseOver bei Submit und Reset</title>
<style type="text/css">
.sub, .res {
  width: 50px;
  height: 50px;
  text-indent: -3000px;
  margin: 0;
  padding: 0;
  border: 0;
  cursor: pointer;
}
.sub {background: transparent
  url(https://brauchbar.de/images/submitoff.gif)
  no-repeat center top; }
.res {background: transparent
  url(https://brauchbar.de/images/resetoff.gif)
  no-repeat center top; }

.sub:hover {background-image:
  url(https://brauchbar.de/images/submiton.gif)}
.res:hover {background-image:
  url(https://brauchbar.de/images/reseton.gif)}
</style>
</head>
<body>
<form name="test" method="post" action="https://brauchbar.de">
<table>
<tr><td align="center"><input type="text" name="test" value="" /></td></tr>
<tr><td align="center"><input type="submit" class="sub" title="Absenden">
&nbsp; <input type="reset" class="res" title="Löschen">
</td></tr>
</table>
</form>

</body>
</html>

Das Beispiel

Obiger Code liefert in Ihrem Browser:

Nutzen Sie CSS für diesen Effekt, so stehen Ihnen natürlich alle Möglichkeiten von CSS zur Verfügung.