Trick # 440 | Dieser Beitrag beinhaltet 447 Wörter. – Geschätzte Lesezeit: ca. 3 Minuten.
Links in Lauftexten sind beliebt, um weiterführende Infos bereitzustellen. Mit ein wenig CSS lassen sich solche Verknüpfungen auch ganz einfach hervorheben und sogar animieren, wenn der Mauszeiger über den Link bewegt wird.
Wir machen doch gleich ein Beispiel und setzen hier einen Link auf diesen Beitrag. Genau so soll das Resultat des heutigen Tricks aussehen.
Bewegen Sie mal den Mauszeiger über den Link, um den Effekt zu sehen.
Sie benötigen dafür ein paar Zeilen CSS-Code, die Sie in das CSS-Stylesheet Ihrer Website – unter Design/Customizer/Zusätzliches CSS – einfügen können:
p>a:link {
text-decoration: none;
color: #293280; /* Textfarbe festlegen */
background-image: linear-gradient(#293280, #293280), linear-gradient(#59B14B, #59B14B); /* Legen Sie die Farbe der Linie unter dem Link fest, wenn dieser mit dem Mauszeiger bewegt wird, und legen Sie dann die Hintergrundfarbe fest, die beim Bewegen des Mauszeigers angezeigt wird; dies ist auch die ursprüngliche Linienfarbe. */
background-position: 0% 100%;
background-repeat: no-repeat;
background-size: 0% 2px, 100% 2px;
transition: background-size .5s; /* Animationsdauer festlegen */
position: relative;
padding: 5px;
}
p>a:link:hover, p>a:link:focus {
background-size: 100% 2px, 100% 100%;
color: #ffffff; /* Textfarbe, wenn der Mauszeiger über dem Link liegt */
}Schon ist die Sache erledigt. Anpassungen werden Sie vielleicht hinsichtlich der Farben vornehmen wollen: Diese finden Sie in den Zeilen 3, 4 und 13. Auch die Animationsdauer beim hovern können Sie anpassen: dies geschieht in Zeile 8 – im obigen Code ist die Animation auf eine halbe Sekunde (0.5s) festgelegt.
Werbung
Werbung
