CSS-Hover-Effekte: Eine interaktive Bereicherung für Ihre Website
Die meisten modernen Webseiten nutzen Cascading Style Sheets (CSS), um ihr Aussehen zu gestalten. Während manche Seiten lediglich grundlegende CSS-Funktionen verwenden, setzen andere auf erweiterte Techniken, um ihre Webanwendungen ansprechender zu machen. Das Hinzufügen von auffälligen Effekten kann die Benutzerinteraktion und das Engagement steigern, sei es durch höhere Klickraten, Handlungsaufforderungen oder eine längere Verweildauer auf der Seite.
In diesem Artikel werden wir die Grundlagen von CSS-Hover-Effekten erläutern, zeigen, wie sie Ihre Website hervorheben können und wie Sie diese Effekte umsetzen. Zudem werden wir Beispiele von Websites vorstellen, die diese Techniken erfolgreich einsetzen.
Was ist ein CSS-Hover-Effekt?
Ein CSS-Hover-Effekt tritt auf, wenn ein Besucher der Webseite seinen Mauszeiger über ein bestimmtes Element bewegt. Dies kann eine Veränderung der Farbe, des Textes oder sogar animierte Effekte zur Folge haben. Solche Effekte dienen dazu, die Interaktivität einer Webseite zu verbessern und die Navigation intuitiver zu gestalten.
CSS-Hover-Effekte können entweder als Übergänge oder Animationen realisiert werden.
Übergänge
Übergänge ermöglichen es, das Aussehen oder Verhalten eines Elements auf einer Webseite zu verändern. Diese Veränderungen werden durch ein Ereignis, wie das Hovern des Mauszeigers, ausgelöst. Ein Übergang bewegt sich fließend vom Ausgangszustand in den Endzustand. Wichtig ist, dass ein Übergang nur einmal ausgeführt wird und keine Zwischenzustände definiert werden können.
Animationen
Animationen hingegen nutzen Keyframes, die es ermöglichen, Animationen zu wiederholen, in Schleifen abzuspielen und einen Übergang vom Start- zum Endzustand mit Zwischenschritten zu gestalten. Ein Keyframe bestimmt, wie ein animiertes Element zu einem bestimmten Zeitpunkt in der Animationssequenz aussieht. Animationen bieten somit mehr Flexibilität und Komplexität als einfache Übergänge.
Verschiedene Arten von CSS-Hover-Effekten
CSS-Hover-Effekte können auf Texte, Bilder, Videos, Links oder Schaltflächen angewendet werden. Hier sind einige der wichtigsten Anwendungsfälle:
#1. Text-Hover-Effekte
Text-Hover-Effekte eignen sich besonders gut für minimalistische Webseiten, die dennoch eine klare Botschaft vermitteln sollen. Sie können in verschiedenen Formen auftreten:
- Terminal-Text-Effekt: Dieser Effekt simuliert das Tippen in einem Textverarbeitungsprogramm. Der Text wird dabei auf elegante Weise eingeblendet, wobei die Geschwindigkeit so gewählt wird, dass die Lesbarkeit gewährleistet bleibt.
- Textanimation: Hierbei kann der Text animiert werden, indem er beispielsweise nach oben, unten oder seitwärts gleitet.
#2. Link-Hover-Effekte
Webseiten enthalten in der Regel viele Hyperlinks, die Benutzer zu verschiedenen Seiten weiterleiten. Da die Anzahl der Links mit dem Wachstum der Website steigt, werden Link-Hover-Effekte immer wichtiger. Sie können wie folgt realisiert werden:
- Farbänderung des Links: Die Farbe des Links kann sich ändern, beispielsweise von Blau zu Rot.
- Hintergrundfarbänderung: Dieser Effekt ändert die Hintergrundfarbe des Links.
- Textaustausch: Hierbei wird der Inhalt des Links bei einem Hover verändert.
#3. Schaltflächen-Hover-Effekte
Schaltflächen spielen eine zentrale Rolle auf Webseiten, da sie es Nutzern ermöglichen, Formulare einzureichen oder zu verschiedenen Bereichen einer Seite zu gelangen. Hover-Effekte auf Schaltflächen können in diesen Formen umgesetzt werden:
- Änderung der Textfarbe: Die Farbe des Textes auf der Schaltfläche kann sich beim Hover ändern, beispielsweise von Rot zu Grün.
- Änderung der Hintergrundfarbe: HTML-Schaltflächen sind standardmäßig transparent. Durch Hover-Effekte kann die Hintergrundfarbe verändert werden, zum Beispiel von Braun zu Grün.
- Bounce-Effekt: Die Schaltfläche kann beim Hover animiert werden, indem sie optisch springt, was die Aufmerksamkeit des Benutzers erregt.
#4. Bild-Hover-Effekte
- Bilderaustausch: Hierbei kann ein Karussell von Bildern erstellt werden, die beim Hover ausgetauscht werden.
- Bilder ein-/ausblenden: Bei dieser Technik werden Bilder durch das Hovern klarer und deutlicher.
- Text-Swap: Viele Webseiten blenden zusätzliche Beschreibungen zu ihren Bildern ein, wenn der Benutzer mit der Maus darüberfährt. Beispielsweise kann eine Reise-Website Details zu einem Hotel einblenden, sobald der Benutzer mit der Maus über das entsprechende Bild fährt.
Nun werden wir einige klassische CSS-Hover-Effekte vorstellen, die Sie für Ihre Website nutzen können.
Ändern der Hintergrundfarbe beim Hover
Dieser Effekt kann auf Schaltflächen, Links oder Texte angewendet werden. Sobald der Mauszeiger das Ziel berührt, ändert sich die Hintergrundfarbe.
So ändern Sie die Hintergrundfarbe Ihres Textes:
- Nutzen Sie die Pseudo-Klasse :hover, um Ihre Ziele zu erreichen.
- Erstellen Sie ein Element wie ein div, eine Schaltfläche oder einen Link, auf dem Sie den Hover-Effekt implementieren wollen.
Hier ist ein Beispielcode zur Implementierung dieses Effekts:
HTML-Datei:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
<div>
Hover and see me change!!!!!
</div>
</body>
</html>
CSS-Datei:
div:hover {
background-color: rgb(255, 0, 0);
width: 18rem;
align-items: center;
text-align: center;
}
Vor dem Hover:
Nach dem Hover:
Ändern der Linkfarbe beim Hover
Links sind essenzielle Elemente einer Webseite, die die Navigation zwischen verschiedenen Seiten ermöglichen. Mittels
Um diesen Effekt zu demonstrieren, sind folgende Schritte notwendig:
- Erstellen Sie ein Selektor-Tag, entweder für das :head- oder :body-Tag.
- Definieren Sie die Pseudo-Klasse :hover.
Der folgende Beispielcode zeigt, wie ein Link seine Farbe von Grün zu Orange ändert, wenn der Mauszeiger darüber bewegt wird:
HTML-Datei:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
<div>
<a href="#">Hover over me and see the magic</a>
</div>
</body>
</html>
CSS-Datei:
a:link {
color: rgb(0, 255, 34);
}
a:hover {
color: #ff8400;
}
Ausgabe vor dem Hover:
Ausgabe nach dem Hover-Effekt:
Gleitende Hervorhebung beim Hover
Dieser Effekt fügt dem Inline-Link beim Hover einen Schatten hinzu und ändert gleichzeitig die Farbe. Um dies zu realisieren, können Sie diese Schritte als Anleitung verwenden:
- Füllen Sie den gesamten Link aus (ein Wert von etwa 0,25rem kann funktionieren).
- Fügen Sie eine Marge mit einem ähnlichen Wert hinzu. Dadurch wird verhindert, dass die Füllung den Textfluss stört.
Eine einfache HTML-Datei könnte so aussehen:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<a href="#">wdzwdz</a>
<link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
</body>
</html>
Die zugehörige CSS-Datei könnte wie folgt aussehen:
a {
box-shadow: inset 0 0 0 0 rgb(255, 21, 0);
color: #ff4000;
padding: 0 .25rem;
margin: 0 -.25rem;
transition: color .3s ease-in-out, box-shadow .3s ease-in-out;
}
a:hover {
color: #fff;
box-shadow: inset 200px 0 0 0 #ff4000;;
}
a {
color: #ff4000;
font-family: 'Poppins', sans-serif;
font-size: 27px;
font-weight: 700;
line-height: 1.5;
text-decoration: none;
}
body {
display: grid;
}
Vor dem Hover-Effekt:
Nach dem Hover-Effekt:
Regenbogen-Unterstreichung beim Hover
Dieser Effekt fügt dem Text beim Hover eine Unterstreichung in verschiedenen Farben hinzu.
- Verwenden Sie die Pseudo-Klasse „linear-gradient“, um einen fließenden Übergang zwischen den Farben zu erzeugen.
- Nutzen Sie die Pseudo-Klasse :hover, um Ihre Ziele zu erreichen.
- Erstellen Sie ein Link-Element, in dem Sie den Hover-Effekt implementieren möchten.
Hier ist ein Beispielcode, um die Regenbogen-Unterstreichung beim Hover zu implementieren:
HTML-Datei:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
<div>
<p>This is <a href="#">Rainbow</a> hover effect. </p>
</div>
</body>
</html>
CSS-Datei:
p {
max-width: 800px;
margin: auto 15%;
line-height: 1.1;
font-size: 78px;
font-weight: 700;
letter-spacing: .0125em;
color: black;
}
a {
display: inline-block;
position: relative;
text-decoration: none;
color: inherit;
z-index: 1;
}
a::after {
content: '';
position: absolute;
left: 0;
bottom: .07em;
height: .1em;
width: 100%;
background: linear-gradient(110deg, #e1f549, #29d0be, #6cb8ea, #ff5959);
z-index: -1;
transition: height .25s cubic-bezier(.6,0,.4,1);
}
a:hover::after {
height: .2em;
}
p {
font-size: 58px;
}
Vor dem Hover:
Nach dem Hover:
Textwechsel beim Hover
Beim Text-Swap wird ein Text durch einen anderen Text ersetzt, wenn der Benutzer mit der Maus über das Ziel fährt. Ein gutes Beispiel dafür ist ein „Kommentar“-Link auf einer Webseite, der sich nach dem Hovern in „Kommentar hinzufügen“ ändern kann.
Um den Textaustausch beim Hover zu implementieren, benötigen Sie:
- ::before- und ::after-Pseudo-Elemente: Diese erzeugen ein separates Element für den auszutauschenden Text nach dem Hover.
- :hover-Pseudo-Element, das die Position oder Sichtbarkeit des Inhalts beim Hover ändert.
Hier ist eine Illustration, wie dieser Effekt umgesetzt wird:
HTML-Datei:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://wilku.top/5-classy-css-hover-effects-for-your-website-2023/style.css">
</head>
<body>
<button><span>99 comments</span></button>
</body>
</html>
CSS-Datei:
button { width: 10em }
button { height: 3em }
button:hover span { display: none }
button:hover:before { content: "Add a Comment" }
Vor dem Hover:
Nach dem Hover:
Websites mit beeindruckenden Hover-Effekten
Wenn Sie Inspiration suchen, sind hier einige Webseiten, die Sie sich ansehen sollten:
#1. Canva
Canva ist bekannt für seine benutzerfreundliche Designplattform. Die Webseite nutzt eindrucksvolle Hover-Effekte auf der Startseite und den Produktseiten. Die Homepage beginnt mit einem dunklen, unscharfen Hintergrund, der sich beim Hovern auflöst, um Bilder freizugeben. Hover-Effekte werden auch bei der Auswahl von Designvorlagen sichtbar.
#2. Haus
Haus ist ein gutes Beispiel für eine Website, die Unterstreichungen beim Hover, Textaustausch beim Hover und Änderungen der Hintergrundfarbe beim Hover verwendet.
#3. Mainworks
Mainworks setzt sowohl Animationen als auch Übergänge für seine Hover-Effekte ein. Bemerkenswerte Effekte sind der Textaustausch, das Ändern der Textfarbe sowie das Zoomen von Text und Bildern beim Hovern.
Fazit
Die Auswahl der Hover-Effekte für Ihre Website hängt von der Art Ihrer Website, Ihren Fähigkeiten und Ihrem persönlichen Geschmack ab. Während auf kreativen Plattformen auffällige Hover-Effekte gerne gesehen werden, können sich juristische oder medizinische Webseiten für subtile Effekte entscheiden. Es ist wichtig, dass Sie herausfinden, was am besten zu Ihrer Webseite passt und Ihre Markenfarben widerspiegelt. Nutzen Sie unsere CSS-Ressourcen, um Ihre CSS-Kenntnisse zu vertiefen.