HpBk-TemplateWorld

Formular Buttons gestalten

Einleitung

Homepages, bei denen die "Kommentar-Abgeben-Buttons" anders aussehen, als die Standard-Buttons, werden oft bestaunt. Dabei ist dies gar nicht so schwer und ich erkläre euch, mit welch einfachen Mitteln ihr euren "Kommentar-Abgeben-Button" und natürlich so auch die Buttons des Gästebuchs und Kontaktformulars stylen könnt.

Schwierigkeitsstufe: Anfänger

Die Formular-Buttons im Homepage Baukasten (zum Absenden) im Kontaktformular, Gästebuch, Link-und Topliste, Kommentare) wurden mit "input-tag" erzeugt mit <input type="submit" ....
Diesen Befehle können wir mit CSS anpassen bzw. stylen.

Der CSS-Code

Um das Aussehen anzupassen, fügt ihr folgenden CSS-Code unter "Design" - "Erweiterte Designeinstellungen" im Feld "Text über dem Design" ein.

<style type="text/css">
<!--
input[type="submit"] {
background-color: #FFFFB2;
background-image: url(http://www.URL-DER-GRAFIK.jpg);
color: #000080;
border: 1px solid #CCCCCC;
padding: 3px; 
}
-->
</style>

Man kann natürlich noch einstellen, ob er einen Rahmen bekommen soll, welchen Hintergrund der Button haben soll und und und..

Wenn man sich jetzt mal den Button hier auf der Seite anschaut, mit dem ihr Kommentare abgeben könnt, seht ihr einen Hover-Effekt bei dem Button. Ein solcher Hover-Effekt lässt sich ebenfalls ganz leicht erstellen.

Der CSS-Code für den Hover-Effekt

<style type="text/css">
<!--
input[type="submit"]:hover {
background-color: #FFFFB2;
background-image: url(http://www.URL-DER-GRAFIK.jpg);
color: #FFFFFF;
border: 1px solid #CCCCCC;
padding: 3px;
}
-->
</style>