CSS: Schöne, mal andere Buttons

Hallo,
gerade habe ich eine Methode gefunden, die zwar ein wenig kompliziert ist, aber wunderbar Ihren Dienst versieht.
Wenn Sie ein Formular definieren, erhalten Sie immer einen Windows-Button. Bei Links erhalten Sie einen Schriftzug und müssen sich um den Button selbst kümmern.

Um was geht es genau? Schauen Sie sich doch mal folgenden Submit-Button an:

Langweilig, nicht war? Was aber halten Sie von einem Button, der beim Klicken seine Farbe verändert?

Besser?

Auch Links müssen nicht immer als Link dargestellt sein, oftmals will man hier auch einen Button haben.

Sie könnten jetzt auf die Idee kommen, mit CSS einen Link als Button darzustellen, doch da schlagen die unterschiedlichen Interpretationen der einzelnen Browser dazwischen.

Wenn Sie einen Link im CSS als Kasten definieren, wird er zwar so dargestellt, die Grössen der Darstellungen unterscheiden sich aber, wenn Sie einen Form-Button und einen Link-Button darstellen.

Diesen Größenunterschied wird noch bei IE verstärkt durch eine Verschiebung des Link-Buttons  nach unten.

Somit können Sie so ohne weiteres keinen Link-Button und einen Form-Button auf  „die gleiche Zeile“ stellen.  Auch wenn Sie umständlich mit Tabellen arbeiten, sie bekommen in den einzelnen Browsern immer unterschiedliche Darstellungen.

Nun gibt es im Internet eine ganze Reihe von Tutorials, die derartige Buttons aufzeigen. Wohlweisliche werden aber immer die Form-Buttons von den Link-Buttons unterschieden.

Jetzt stellen Sie sich vor, Sie haben ein Eingabeformular, bei dem der Benutzer die Felder ausfüllt und mit dem Submit-Button absenden kann. Bei den Formular-Buttons gibt es  noch den Reset-Button, dieser wird oft als „Abbrechen“ bezeichnet, was aber falsch ist.

Der Reset-Button schickt zwar das Formular nicht ab, er löscht aber nur den  Formularinhalt und bleibt auf der aktuellen Seite.  Sie wollen dem Benutzer aber zusätzlich einen Escape-Button (Abbruch-Button) anbieten, der die Seite verlässt oder eine andere aufruft. Das wäre m.E. die Funktion eines Buttons „Abbrechen“!

Dafür müssen Sie also einen Submit-Button und einen Link-Button auf eine Zeile nebeneinander stellen.

Um derartiges sowohl für den Firefox als auch für den IE richtig hinzubekommen, habe ich eigentlich nur eine Stelle gefunden, die derartiges anbietet:

http://monc.se/kitchen/59/scalable-css-buttons-using-png-and-background-colors

Diese Realisierung stützt sich auf CSS mit Javascript. Eine ziemlich lange Javascript-Routine übernimmt im Falle eines Formulars die Darstellung und das Absenden des Formulars. Auch kann man die Buttons beliebig einfärben.  Jedoch ist ein  Wehrmutstropfen dabei:

Wenn Sie obiges Abbild erzeugen wollen, müssen Sie mittels einer Tabelle die beiden Buttons ausgeben, da das Javascript die Buttons einfach aneinander hängt:

<form>
…..
<table width=“30%“>
<tr>
<td>
<input type=“Submit“ id=“submit_btn“ value=“zur Dateneingabe“ />
</td>
<td>
<a href=“#“>Link-Button</a>
</td>
</tr>
</table>
</form>

Das js-Coding musste wegen eines kleinen Bugs von mir angepasst werden, da es im IE noch einen Fehler brachte.
Sie finden das Coding und das Beispiel in der folgenden zip-Datei, die Sie sich gerne herunterladen können:
http://marketer.blog.sybeklue.de/dl/CSS_Buttons.zip

So,  dieser Beitrag beschäftigte sich mit ausgefeiltem CSS und seinen Grenzen in den einzelnen Browsern, denn manchmal sind die Dinge, die man gerne haben möchte nicht ganz leicht zu haben.

Viel Erfolg

Bernd Klüppelberg

Bisher gibt es keinen Kommentar. Schreiben Sie einen Kommentar!

Schreibe einen Kommentar