Lehrreich

Normale Buttons mit CSS formatieren


In meinem vorherigen Tutorial habe ich euch bereits gezeigt, wie ihr die Grafikbuttons mit CSS-Buttons ersetzt. Ihr könnt die normalen Buttons wie „Antwort absenden“, „Beitragsvorschau“ etc. aber natürlich auch mit explizit formatieren, damit sie nicht mehr wie normale Standardbutton aussehen. Das gleiche habe ich bei meinem Dragon Nest Template auch gemacht.

Standardbutton

vorher

Beispiel mit CSS-Formatierung

Formatierung mit CSS

Formatieren der Buttons

Um die Buttons zu formatieren muss man die global.css des Templates bearbeiten, das verwendet wird. Dies ist im Admin-CP unter „Templates & Styles > Themes > Euer Theme > global.css > Stylesheet bearbeiten: Fortgeschrittene Methode“ möglich.

Dort müssen die folgenden Klassen deklariert werden:

input.button{}
input.button:hover{}
input.button:active{}

Eventuell sind diese auch schon in der global.css angegeben, also sucht einfach mal danach. Ansonsten legt sie einfach neu an. Ihr könnt die Buttons ganz nach eurem Geschmack gestalten. Auch hier kann euch der CSS-Buttongenerator gute Dienste leisten.

Es ist übrigens empfehlenswert cursor:pointer; mit anzugeben in der Dekleration.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Ähnliche Artikel

Schaltfläche "Zurück zum Anfang"