28. Juli 2010

CSS Tipps (1) – Hover Buttons mit Grafik

Filed under: Tipps und Tricks von Michael um 22:33
 

Dies ist nur ein kleiner Kniff, wie man bei mit CSS in Verbindung mit Hintergrundbildern realisierten Hover-Buttons ein lästiges „Aufflackern“ (Nachladen der Grafik für den Hover-Zustand des Buttons) beim Ersten Aufruf einer Seite verhindern kann.

Anfangs habe ich solche Schaltflächen einfach so umgesetzt, dass halt für den Hover-Zustand eine weitere Grafik angegeben wurde, die erst dann geladen wurde, wenn man den Button zum ersten Mal mit dem Mauszeiger berührte.
Der Sekundenbruchteil den es dauerte, bis der zweite Zustand geladen war, wirkte meiner Meinung nach lästig und unprofessionell.
Nun, die Lösung ist so einfach, dass ich gleich hätte darauf kommen können (vielen ist dies bestimmt auch nicht neu, aber manchmal sieht man den Wald vor Bäumen nicht). Man legt einfach die beiden (bei Bedarf auch mehr) Zustände in einer einzigen Grafik ab, und schiebt den sichtbaren Bereich der Grafik um die entsprechende Anzahl Pixel beim Hover hinauf. So wird die Grafik quasi vorgeladen, und das lästige Aufflackern entfällt.

Funktionieren tut das ganz einfach nach dem Prinzip:

Button Zustände in einer einzelnen Grafik

Button Zustände in einer einzelnen Grafik

.hover_button a
{
background: url("css_hover.jpg") 0px 0px no-repeat;
}

.hover_button a:hover
{
background-position: 0px -50px;
}

Natürlich ist es völlig wurst ob man die Grafik in X oder Y verschiebt (je nachdem wie man die Grafik ablegen möchte).
Ich denke das prinzip ist klar 🙂


2 Comments »


    Homepage Bastler schreibt, am 2. August 2010 um 16:14 von

    Danke für den Beitrag. Ich hatte mich schon lange gefragt wie man das einfach im CSS lösen könnte und dann stolpert man zufällig über deinen Beitrag.


    » Web 2.0 Button mit Platz für ein Icon / Symbol Freeware Download Blog schreibt, am 1. September 2010 um 17:01 von

    […] Heute habe ich mir überlegt, zeige ich Euch in wenigen Schritten, wei man einen Button mit sogenannter Web 2.0 Optik erstellt, und diesen vom Style her so gestaltet, dass man auch einen Platz für ein zusätzliches kleines Icon oder Symbol hat. Der Button lässt sich hervorragend mit meinem Mini CSS-Tutorial kombinieren, und somit ein schöner Hover-Effekt erstellen (also ein Zustandwechsel wenn man mit dem Mauszeiger auf z.B. einer Webseite über den Button fährt.) CSS Hover-Buttons […]


Leave a comment




Ähnliche Beiträge zum Thema: "CSS Tipps (1) – Hover Buttons mit Grafik"


Weitere Beiträge zum Thema: