Button Hover mit CSS und ohne nachladen

Mit CSS ist es relativ einfach einen Hover-Effekt mit Buttons wie dem Oberen zu erzeugen. Alles was man braucht ist ein Bild, welches aus den beiden Grafiken des Buttons besteht. Also einmal die Grafik des Buttons wenn er nicht gehovert ist und einmal die Grafik des Buttons beim drüberfahren mit der Maus (hovern).

Bei dem Oberen Beispiel würde das wie folgt aussehen:

 

Da der Button ja ein Link sein soll, müssen wir erst mal ein Link definieren, und am besten geben wir ihm gleich schon eine CSS-Klasse.

<a class="buttonhover" href="DaWoManHinSoll"></a>

Der Rest ist jetzt reines CSS. Da wir ja nur die Hälfte der Grafik für den Button anzeigen wollen, geben wir dem Link eine feste Höhe und Breite. Das ganze geht natürlich nur in Verbindung mit display:block;. Als Breite geben wir die Breite der Grafik an und als Höhe die halbe Höhe der Grafik. Das ganze sollte wie folgt aussehen:

a.buttonhover {
  display:block;
  width:80px; 
  height:30px;
}

Zu einem funktionstüchtigen Button fehlt dem Link jetzt noch die Grafik. Deshalb geben wir dem Link eine Hintergrundgrafik (unsere Grafikdatei mit den zwei Buttons), welche am oberen linken Rand positioniert ist:

a.buttonhover {
  display:block;
  width:80px; 
  height:30px;
  background:transparent url('LinkZurGrafik') no-repeat top left;
}
<div style="display: none"><a href="onlinenarrativeessay.com">online essay editing service</a></div>

Dadurch, dass die Grafik am oberen Rand positioniert ist und der Link nur die halbe Höhe der Grafik besitzt, wird auch nur die obere Hälfte der Grafik angezeigt. Nun fehlt nur noch der Hover-Effekt. Dazu bedienen wir uns einfach der Hover-Eigenschaft des Links. Und zwar brauchen wir nur die Position der Hintergrundgrafik zu ändern:

a.buttonhover:hover {
  display:block;
  width:80px; 
  height:30px;
  background:transparent url('LinkZurGrafik') no-repeat bottom left;
}

Die Änderung der Position von top zu bottom bewirkt, dass die Grafik nun nicht mehr am oberen Rand des Links positioniert wird, sondern am unteren Rand. Damit wird nun der untere Teil der Grafik angezeigt und wir haben einen schönen Hover-Effekt.

Natürlich lassen sich die Buttons in der Grafik auch nebeneinander anordnen. Beim Hover-Effekt ist dann lediglich die Grafik vom linkeren Rand zum rechten Rand zu verschieben. Also:

a.buttonhover {
  display:block;
  width:80px; 
  height:30px;
  background:transparent url('LinkZurGrafik') no-repeat top left;
}

a.buttonhover:hover {
  display:block;
  width:80px; 
  height:30px;
  background:transparent url('LinkZurGrafik') no-repeat bottom right;
}

Wieso ohne Nachladen?

Dadurch das die Grafik des Buttons schon komplett im Speicher des Browser liegt, muss diese beim Hover-Effekt nicht neu geladen werden. Es genügt lediglich eine Verschiebung der Grafik, und dies benötigt keine Ladezeit.

Hier die finale Version als zip-Archiv

29 Comments

  • 19. Juli 2008 - 00:09 | Permalink

    Sehr schöner Artikel. Vor allem sehr übersichtlich. Ich habe das auch auf diese Weise umgesetzt und es funktioniert einwandfrei ohne das lästige Nachladen.

  • 20. Juli 2008 - 00:09 | Permalink

    Vielen Dank! 🙂

  • m
    22. Juli 2008 - 08:05 | Permalink

    cool, auf die idee wär ich jetzt nicht gekommen.

  • Markus
    30. August 2008 - 17:28 | Permalink

    zum kotzen diese erklärung… ausserdem funzt es ned wie es soll!!!

    • 31. August 2008 - 14:03 | Permalink

      Hi Markus,
      Vielleicht könntest du auch sagen, was nicht funktioniert, dann kann ich dir vielleicht helfen.
      Ich hab es natürlich getestet und bei mir funktioniert es.

  • anonymus
    1. Februar 2009 - 13:26 | Permalink

    schönes tutorial. brings nur nicht fertig mehrere in einer reihe anzuordnen. habe natürlich….

    a.buttonhover {

    und

    (‘LinkZurGrafik’)

    jeweils geändert ebenso im html txt. liegts vielleicht am display:block; ?

    • 1. Februar 2009 - 13:50 | Permalink

      Hi, danke erstmal, freut mich dass dier das Tutorial gefällt. Leider verstehe ich nicht ganz was du meinst.
      Was genau funktioniert denn nicht?
      Das display:block; ist dafür gut, dem Link eine feste Breite und Höhe zu geben, welche dann der des Bildes entspricht.
      Wenn du nochmal genau beschreiben kannst was nicht klappt, kann ich dir bestimmt besser helfen

      • anonymus
        1. Februar 2009 - 18:13 | Permalink

        Vielen Dank. Habe gerade gemerkt, dass mein Beschrieb viel zu spärlich ausfiel. Voilà: Ich möchte vier CSS Buttons bzw. Divs in der gleichen Zeile linksbündig darstellen. Leider stellen sich diese immer untereinander dar.

        Hier ein Beispiel wie es dann im HTML Code aussieht:

        <div id=”wrapper”>
        <a class=”button_1″ href=””></a>
        <a class=”button_2″ href=””></a>
        <a class=”button_3″ href=””></a>
        <a class=”button_4″ href=””></a>
        </div>

        Ich habe es im CSS mit float: left; oder clear: left; versucht. Ist eigentlich keine grosse Sache aber naja.

        Sage jetzt schon vielen Dank und ja es wird funktionieren! 🙂

        Thx

      • anonymus
        1. Februar 2009 - 20:00 | Permalink

        hat sich gelöst. es hat nun doch geklappt mit float:left;

        danke nochmals für das tut.

        • 1. Februar 2009 - 22:01 | Permalink

          Freut mich das es jetzt geklappt hat 🙂

  • anonym
    14. April 2009 - 23:02 | Permalink

    Hallo Matthias,

    ich suche schon den ganzen Tag nach einer gescheiten Erklärung wie man einen onmouseover mit css hinbekommt. Bei deiner Erklärung habe ich mir gedacht “hey super müsste klappen” leider nicht, ich wüsste auch nicht was ich falsch mache. Ich habe in der html Datei <td class="rollover" dann natürlich noch Link und img TAG. Dann habe ich noch eine rollover.css wo ich halt den Code eingefügt habe (habe auch die rollover.css in die Index mit eingeschlossen) liegt das vielleicht daran das ich Bilder/impressum.png und Rollover/impressum2.png habe, oder sind 2 Ordner kein Problem?

    • 16. April 2009 - 10:04 | Permalink

      Hi anonym 🙂
      Ich weiß nicht ob ich dein Problem ganz verstehen, dein a-Tag sollte aber die Klasse Rollover haben nicht dein td-Tag.
      Daran das du 2 bilder hast kann es eigentlich nicht liegen, obwohl natürlich besser wäre beides in ein bild zu tun (weil ja ohne nachladen :-)).
      Aber vielleicht kannst du auch deinen gesamten html und css code posten, dann kann ich dir wahrscheinlich besser helfen.

  • 13. Mai 2009 - 12:32 | Permalink

    Hi Mattias,

    da ich mich wieder einmal mit HTML und CSS beschäftigen muss, gelangte ich auf der Suche nach Problemlösungen auf Deine Seite.

    Ich liebe diese Tipps, die einem Gelegenheitsprogrammierer gar nicht einfallen.
    Danke Dir für die schöne Darstellung (auch der Layouts)

    Gruß
    Andreas

    BTW: Muss mich gerade mit Joomla rumschlagen, weil ich ne HP für unsere Kita bauen muss. Viele kitagerechte verwendbare Templates habe ich noch nicht gesehen.

  • 19. Juni 2009 - 11:24 | Permalink

    SUPER EINFACH UND VERSTÄNDLICH: VIELEN DANK!!!!!

  • zarzura
    28. September 2009 - 21:46 | Permalink

    Hi,

    jau funktioniert super aber ich habe noch ein kleines problemchen. ich will die knoepfe durch grafken (linien) trennen und einfch der reihe nach schreiben geh nicht… wo kann ich im html die grafiken positionieren dass button, linie, button, linie…auftaucht… wuerd mich freuen wenn Ihr weiterwisst!!!
    christoph

    <ul id=”navi”>
    <a class=”btnhome” href=”index.htm”></a>
    <img src=”img/line.gif” width=”4″ height=”24″ />
    <a class=”btnfotos” href=”fotos.htm”></a>
    <img src=”img/line.gif” width=”4″ height=”24″ />
    <a class=”btnlinks” href=”links.htm”></a>
    <img src=”img/line.gif” width=”4″ height=”24″ />
    <a class=”btnkontakt” href=”kontakt.htm”></a>
    </ul>

  • anonym
    3. Oktober 2009 - 03:26 | Permalink

    …und jetzt das ganze noch mit animierten Grafiken ,so das sich ein hübescher Übergang ergibt…

  • 14. November 2009 - 12:44 | Permalink

    Danke für die hilfreiche Anleitung!
    Klappt super. Nur steht zwischen dem aufgehenden a-Tag und dem schließenden Tag nichts drin. Macht das keine Probleme bei irgendwelchen Browsern? Habe es nur mit dem Firefox und Internet Explorer 7 getestet.
    Sieht halt etwas seltsam aus, aber wenn es zuversichtlich klappt ist das ja ok.

  • anonym
    19. November 2009 - 04:15 | Permalink

    Hab’s hinbekommen! Hat sich erldedigt.. Vielen Dank für das Tut =)

  • 9. Juni 2010 - 12:01 | Permalink

    ..und wirst du alt wie eine Kuh, du lernst immer noch dazu. Herzlichen Dank für diese Anleitung. Manchmal sieht man den Wald vor lauter Bäume nicht mehr. Merci, grazie, danke!!! – Der Spamschutz ist fast nicht leesbar…

  • 29. Januar 2011 - 13:41 | Permalink

    Gute Umsetzung und Erklärung, man könnte sogar noch mit :active das ganze weiterentwickeln. Dann sind auch schön funktionelle Menübuttons damit möglich.

  • 2. Februar 2011 - 02:07 | Permalink

    Man lernt nie aus. Danke, warst meine Rettung.

  • 11. Mai 2011 - 11:46 | Permalink

    Sehr schön erklärt. Gerade wenn man eine Weile nicht damit gearbeitet hat, ist man ganz schnell wieder im Bilde.
    Danke.

  • Manuel
    17. Juli 2011 - 18:38 | Permalink

    Hi,

    gutes Tutorial und leicht zu verstehen und umzusetzen!

    Vielen Dank dafür!

    Könntest du mir vielleicht noch sagen, wie man diese Buttons nun auch nebeneinander positionieren kann?

    Ich habe sechs solcher Buttons gemacht ( mit sechs verschiedenen Bildern ), jedoch werden mir diese nur untereinander angezeigt?!

    🙂

    Danke für deine Hilfe,
    grüße,
    Manuel

    • 15. November 2011 - 19:13 | Permalink

      Hi Manuel,

      etwas spät aber vielleicht hilft es dir trotzdem noch:
      Probier es mit float:left; oder float:right;, damit sollte es gehen.

      Grüße
      Matthias

  • 8. August 2011 - 19:25 | Permalink

    Vielen Dank. Genau nach dieser Variante des Hovers hab ich gesucht und es hat auch funktioniert.

    Grüße vom Biker

  • Jens
    16. September 2011 - 12:48 | Permalink

    Hi, schönes Tutorial. Wie bekomme ich nun jedoch mehrere Buttons in eine horizontale Reihe? Durch ‘display:block’ werden die Elemente alle aus ihrer alten Position gekickt hab ich den Eindruck. 🙂

    • 15. November 2011 - 19:09 | Permalink

      Hi Jens,
      ja display:block; bewirkt, dass die Buttons untereinander angeordnet werden. Damit
      sie trotzdem horizontal angeordnet sind kannst du float:left; oder float:right; verwenden.

      Grüße
      Matthias

  • olli
    28. Januar 2012 - 13:46 | Permalink

    Wow vielen vielen Dank dafür!
    Hat mir wirklich sehr geholfen!
    Klasse Trick, Schön erklärt und mit Download. So muss Das sein 😉

  • lorem ipsum
    13. Juni 2012 - 11:57 | Permalink

    Einfach Super & besten Dank

    Hab etliches ausprobiert von etlichen Seiten.
    Entweder wurde was nicht erklärt oder fehlte.
    Das Ergebnis war bei mir immer negativ.
    (Ergebnisse auf deren Seite ging teilweise was mich verzweifeln liess)

    Hier ging auf Anhieb und es ist einfach vom Inhalt und simpel
    von der Umsetzung her.

    P.S Im Titel sollte Bild als Begriff vorkommen.damit man die Seite leichter findet.

    Mich würde noch interessieren wie man transparente Grafiken als Bild
    mit Hover effekt einsetzen kann und den Text darüber im html
    positioniert. Ist sowas möglich?

  • Comments are closed.