Submit-Buttons, die wie einfacher HTML-Text dargestellt werden
(Auszug aus "CSS Kochbuch" von Christopher Schmitt)
Problem
Ein Submit-Button soll so dargestellt werden, dass er wie normaler HTML-Text aussieht.
Lösung
Durch den Einsatz von verschiedenen CSS-Formatierungseigenschaften kann die gewünschte Darstellung als HTML-Text erreicht werden.
Zu Beginn versehen Sie das input-Element mit einem class-Attribut und einem passenden Wert:
<input type="submit" name="submit" value="send »" class="submit" />Anschließend weisen Sie der Klasse die nötigen CSS-Eigenschaften zu, um Rahmen und Hintergrundfarbe des Buttons zu entfernen (siehe nächste Abbildung):
.submit {
border: none;
background-color: #fff;
padding: 0;
margin: 0;
width: 5em;
}
Abbildung: Ein Submit-Button, der wie HTML-Text dargestellt wird.
Mit der Pseudoklasse :hover können Sie außerdem einen Rollover-Effekt erzielen (siehe nächste Abbildung):
.submit:hover {
text-decoration: underline;
}
Abbildung: Bewegt sich der Mauszeiger über den als Text dargestellten Button, wird dieser unterstrichen dargestellt.
Diskussion
Das Anpassen von Submit-Buttons an das Aussehen des übrigen HTML-Textes ist perfekt für Designer, die der Meinung sind, dass die generischen Buttons nicht zu ihrem Design passen, die aber keine Grafik anstelle des Buttons verwenden möchten.
Gelegentlich kann die Verwendung von Submit-Buttons auch die Benutzererfahrung einer Website schmälern, da einige User sich scheuen, ihre Daten über ein Formular mit Submit-Button zu versenden. Die Darstellung des Buttons als Textlink kann dem Benutzer solche Hemmungen nehmen, denn die Hürde, auf einen Link zu klicken, ist wesentlich niedriger.
Dieses Rezept funktioniert nur mit Browsern, die auch Änderungen an der Darstellung des Submit-Buttons zulassen. Hierzu gehören Mozilla, Firefox, Netscape Navigator 7+ und Opera. Safari ist hiervon leider ausgeschlossen, da er prinzipiell die Macintosh-eigenen Buttons verwendet.
Siehe auch
Das Rezept Einfache HTML-Textlinks als Submit-Buttons verwenden für das umgekehrte Verfahren.
| << zurück | vor >> |
| Tipp der data2type-Redaktion: Zum Thema CSS bieten wir auch folgende Schulungen zur Vertiefung und professionellen Fortbildung an: |
Copyright der deutschen Ausgabe © 2007 by O’Reilly Verlag GmbH & Co. KG
Für Ihren privaten Gebrauch dürfen Sie die Online-Version ausdrucken.
Ansonsten unterliegt dieses Kapitel aus dem Buch "CSS Kochbuch" denselben Bestimmungen, wie die gebundene Ausgabe: Das Werk einschließlich aller seiner Teile ist urheberrechtlich geschützt. Alle Rechte vorbehalten einschließlich der Vervielfältigung, Übersetzung, Mikroverfilmung sowie Einspeicherung und Verarbeitung in elektronischen Systemen.
O’Reilly Verlag GmbH & Co. KG, Balthasarstr. 81, 50670 Köln