Button - Gestaltung - Als Druckknopf

1 Antwort

Hi!

Wenn man direkt HTML-Buttons verwendet und sie mit CSS ansprechend gestaltet geht das vielleicht ein wenig einfacher, aber auch bei selbst gestalteten (...ich versteh das mal so dass Grafiken verwendet werden) Buttons geht das.

Zum Beispiel indem man nicht eine Grafik für den Button verwendet - sondern drei. Eine für den Normalzustan, eine für den hover-Zustand (...wenn man mit der Maus drüberfährt) und eine für den active-Zustand (...wenn der Button gerade gedrückt wird).

Mit CSS kann man dann je nach Zustand ein anderes Bild für das Button-Element anzeigen lassen. Wenn mans einigermaßen elegant lösen will erstellt man nicht drei verschiedene Grafikdateien, sondern eine einzelne - die alle drei Button-bilder nebeneinander zeigt. Mit CSS lädt man dann nur diese eine Grafikdatei und verschiebt sie so dass immer nur der entsprechende Button-Ausschnitt gezeigt wird.

Hier was zu den verschiedenen CSS-Definitionen je nach Button-Zustand:

usabilitypost.com/2012/01/10/pressed-button-state-with-css3/

...und hier ne Erklärung zum "verschieben" von Grafiken:

w3schools.com/css/css_image_sprites.asp

Grüße!

Was möchtest Du wissen?