So erstellen Sie einen Link mit einem Hover-Bild in einfachem CSS

Artikel geschrieben von:
  • Website Design
  • Aktualisiert: Aug 02, 2013

Was ist ein Schwebeflug? Definition aus zitiert UWStout.edu:

'Hover' ist ein Effekt, der auftritt, wenn Sie den Mauszeiger über einen beliebigen Link bewegen. Der Link kann so codiert werden, dass er auf den Schwebeflug reagiert, indem er die Farbe ändert, eine neue Grafik anzeigt oder sogar eine Audiodatei wiedergibt.

Der Hover-Effekt verbessert die Webbenutzerfreundlichkeit und hilft Webinhabern, ihren Webverkehr zu steuern. Wenn Sie möchten, dass Ihre Webbenutzer einem speziellen Link besondere Aufmerksamkeit schenken, können Sie dies tun, indem Sie einen Link mit attraktivem Hover-Effekt erstellen. Ein einfacher Hover-Effekt so (eine einfache Unterstreichung und Änderung der Textfarbe) zeigt an, dass dieser Text klickbar ist, und verbessert die Webinteraktion. Das Ändern der Textfarbe und -stile (Unterstreichen / Überstrichen / Fettdruck) ist jedoch sehr grundlegend, und mit Hover kann noch viel mehr getan werden.

In diesem Artikel werde ich zeigen, wie Sie gut aussehende Links mit Hover-Effekt erstellen können.

Beispiel 1: Verknüpfung mit der Hover-Taste

Sehen Sie sich zunächst das Funktionsbeispiel an (bewegen Sie den Mauszeiger über den Link, um zu sehen, wie er funktioniert - Änderung des Symbols an der Seite).

Beispiel 1 - Link mit Bild der Hover-Schaltfläche

Dies ist die vollständige Version dessen, was in diesem Beispiel erstellt wird.

Wie erstellen wir es in einfachem CSS?

Das Schaltflächenbild

Schritt 1, wie Sie sehen können, benötigen wir Pfeilsymbole in zwei verschiedenen Versionen. In unserem Beispiel habe ich rot (#CC3300) als Standardlinkschaltfläche verwendet. und grau (#333333) für den Hover-Effekt. Eine solche Schaltfläche kann leicht mit einer beliebigen Bildbearbeitungssoftware erstellt werden.

Wir haben jetzt die rote Farbtaste (sagen wir b1.png) und die Farbe rey (Schaltfläche sagen, b2.png). Verbinden Sie diese beiden mit b1.png auf b2.png in einer Image-Datei. Dies ist unser endgültiges Bild für den Link. Nennen Sie es (sagen Sie x.png) und laden Sie den gewünschten Ort hoch (für meinen Fall habe ich ihn in meinem WP-Vorlagenordner abgelegt).

Für Ihre Unterlagen:

b1.png , b2.png und x.png

Der CSS-Code

Weiter zum CSS-Code. Grundsätzlich wollen wir den Linktext leicht nach rechts einrücken, um Platz für die Schaltfläche zu schaffen. und zur gleichen Zeit ein anderes Bild anzeigen, wenn sich der Link im Schwebeflug befindet. Dies sind ziemlich grundlegende Dinge, außer dass wir eine kleine Drehung der Hintergrundposition benötigen. Der Trick besteht darin, den oberen Teil des Bildes (die rote Schaltfläche) für den ursprünglichen Link anzuzeigen. Wenn Sie den Mauszeiger darüber bewegen, verschieben Sie das Hintergrundbild durch einen Rand von -11px (der sich auf Ihrer Website möglicherweise unterscheidet), um die graue Schaltfläche anzuzeigen.

.xa {color: #cc3300; Auffüllen links: 14px; Schriftdicke: fett; Hintergrundbild: URL (images / x.png); Hintergrundposition: 0 2px; Hintergrundwiederholung: keine Wiederholung; }
.xa: hover {color: #333333; Auffüllen links: 14px; Schriftdicke: fett; Hintergrundbild: URL (images / x.png); Hintergrundposition: 0 -11px; Hintergrundwiederholung: keine Wiederholung; }

Implementierung

Um diesen Hover-Effekt zu demonstrieren, fügen Sie einfach Klasse x in den angegebenen Bereich ein. Hier ist ein Beispiel, wie Sie es tun können.

<p class = 'x'> <a href="http://www.webhostingsecretrevealed.com"> Homepage </a> </ p>

Beispiel 2: Link im Hover-Hintergrund

Mit demselben Konzept gibt es unendlich viele Möglichkeiten, wie Sie Ihre Links cool aussehen lassen können. Hier ist ein weiteres Beispiel dafür, was wir mit den Hover-Effekten mit einer etwas anderen Methode machen können. Schauen Sie sich noch einmal die fertige Version an.

Beispiel 2 - Link im Hover-Hintergrund

In diesem Beispiel werde ich einen Button-like-Hyperlink erstellen, bei dem sich der Hintergrund ändert, wenn Benutzer mit der Maus darüber fahren.

Wie erstellen wir es in einfachem CSS?

Die Hintergrundbilder

Erstellen Sie zunächst zwei Bilder eines abgerundeten Rechtecks. Zu Demonstrationszwecken werden diese beiden Bilder in diesem Beispiel nicht zusammengeführt. Wir werden das rote Rechteck (#CC3300) als b1.png bezeichnen. und das kastanienbraune (#9F2800) Rechteck als b2.png.

Der CSS-Code

Als nächstes folgen die Codes für Ihr Stylesheet (in diesem zweiten Beispiel wird die Klasse 'y' genannt).

ay {width: 280px; Höhe: 42px; Farbe: #000000; Auffüllen: 10px; Textdekoration: keine; Bildschirmsperre; Schriftdicke: fett; Hintergrundbild: URL (images / b1.png); Hintergrundwiederholung: keine Wiederholung; }
ay: hover {width: 280px; Höhe: 42px; Farbe: #FFFFFF; Auffüllen: 10px; Schriftdicke: fett; Textdekoration: keine; Bildschirmsperre; Hintergrundbild: URL (images / b2.png); Hintergrundwiederholung: keine Wiederholung; }

Implementierung

Um den Link anzuzeigen, fügen Sie einfach die Klasse (y) in das <a href> -Tag in Ihrem Quellcode ein. Beispiel:

<a href="http://www.webhostingsecretrevealed.com" class="y"> Homepage </a>

Wrapping up

Ich hoffe, dieser Artikel hat Ihnen wertvolle Informationen geliefert und einige von Ihnen dazu inspiriert, CSS auf kreative Weise zu verwenden. Wenn Sie der Meinung sind, dass ich noch weitere Punkte in diesem Handbuch hinzufügen sollte, können Sie Ihre Ideen im Kommentarbereich hinterlassen.

Weitere CSS-Tutorials

Wenn dir dieser Beitrag gefällt, solltest du auch nachsehen Wie Sie CSS 3-Animationen sinnvoll einsetzen, Muss CSS 3 Tutorials 2012 lesen, ebenso gut wie Machen Sie Ihre Website cool mit diesen CSS 3-Techniken.

Über Jerry Low

Gründer von WebHostingSecretRevealed.net (WHSR) - eine Hosting-Bewertung, die von 100,000-Benutzern als vertrauenswürdig und nützlich erachtet wird. Mehr als 15 Jahre Erfahrung in den Bereichen Webhosting, Affiliate-Marketing und SEO. Mitwirkender bei ProBlogger.net, Business.com, SocialMediaToday.com und anderen.