Social Media Buttons mit Hover-Effect
Im folgenden Tutorial wird Schritt für Schritt erklärt, wie du Social-Media Buttons erstellen kannst, bei welchen du mit dem Mauszeiger darüberfahren kannst, wodurch sich ein Tooltip öffnet.
Was du benötigst:
Zunächst benötigst du einen Code-Editor wie zum Beispiel Visual Studio Code und einen Browser wie zum Beispiel Mozilla Firefox, um starten zu können.
HTML-Grundlagen:
Als erstes wird eine HTML-Datei in Visual Studio erstellt mit dem Namen index.html. Im selben Ordner kannst du auch gleich eine CSS-Datei mit dem Namen style.css erstellen. Wir starten aber mit der HTML-Datei. <!DOCTYPE html> legt die Dokumentenart fest. Im <head> stehen die Kopfdaten und es wird auf externe Quellen hingewiesen. In diesem Fall nutzen wir einen Font Awesome Link für die Logos in den Buttons.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Social Media Buttons with Tooltip</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>HTML-Body
Im <body> des HTML-Codes steht der Hauptinhalt. Es enthält alle sichtbaren Inhalte, die auf der Webseite angezeigt werden sollen. Als erstes erstellen wir eine ungeordnete Liste <ul> mit der Klasse "wrapper" class="wrapper">. Alle Social-Media-Icons werden als Listenelemente innerhalb dieser Liste dargestellt. Jedes <li>-Element stellt ein Social-Media-Icon dar und hat die Klasse "icon" class="icon">. Innerhalb jedes <li>-Elements gibt es zwei <span>-Elemente und ein <i>-Element: <span class="tooltip"> stellt den Tooltip-Text für das entsprechende Social-Media-Icon dar und <span><i class="fab fa-facebook-f"></i></span>enthält das Social-Media-Icon.
<body>
<ul class="wrapper">
<li class="icon facebook">
<span class="tooltip">Facebook</span>
<span><i class="fab fa-facebook-f"></i></span>
</li>
</ul>
</body>
</html>In diesem Fall ist es das Facebook Icon. Der genaue Stil wird durch die Font Awesome-Klassen definiert (fab für "Font Awesome Brand" und fa-facebook-f für das Facebook-Icon).
Das können wir jetzt für weitere Icons wiederholen. Der rohe HTML-Code sieht nun folgendermaßen aus:
CSS
Jetzt starten wir mit dem CSS-Code. Mit @import url(https://fonts.googleapis.com/css?family=Open+Sans); importieren wir die Schriftart "Open Sans" von Google Fonts. Sie wird später im Code als bevorzugte Schriftart für die Webseite verwendet.
Allgemeine Zurücksetzung der Stildefinition
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
*:focus,
*:active {
outline: none !important;
-webkit-tap-highlight-color: transparent;
}Der Selektor *: trifft auf alle HTML-Elemente zu. Hier werden die Standardmargen und -polster zurückgesetzt und die box-sizing-Eigenschaft wird auf border-box gesetzt. Dadurch wird sichergestellt, dass Polsterung und Rahmen in die berechnete Breite und Höhe eines Elements einbezogen werden.
*:focus und *:active: Diese Selektoren zielen auf Elemente ab, die den Fokus haben oder aktiv sind. Hier wird die Outline (Standard-Browser-Rahmen) entfernt, wenn ein Element fokussiert oder aktiv ist. -webkit-tap-highlight-color stellt sicher, dass beim Tippen auf ein Element auf mobilen Geräten keine Hervorhebung erscheint.
Grid-Layout für den gesamten Bildschirm und Hintergrundverlauf
html,
body {
display: grid;
height: 100%;
width: 100%;
font-family: "Open Sans", sans-serif;
place-items: center;
background: linear-gradient(315deg, #f4eded, #80b5ed);
}Mit display: grid; wenden wir ein Rasterlayout auf die html- und body-Elemente an. height: 100%; und width: 100%; erstreckt das Raster über die gesamte Höhe und Breite des Bildschirms. Um die Schriftart auf "Open Sans" zu setzen, schreiben wir font-family: "Open Sans", sans-serif;. Zentrieren können wir die Inhalte sowohl horizontal als auch vertikal im Raster mit place-items: center;. Wenn man möchte, kann man jetzt noch einen Hintergrund hinzufügen. Da haben wir uns für einen Farbverlauf entschieden. Um den Farbverlauf darzustellen, schreiben wir background: linear-gradient(315deg, #f4eded, #80b5ed);. Die Farben gehen von einem hellen Grauton (#f4eded) zu einem helleren Blauton (#80b5ed) über und verlaufen von oben links nach unten rechts.
Stil für die Social-Media-Buttons und Tooltips:
.wrapper {
display: inline-flex;
list-style: none;
}Im .wrapper: wird die allgemeine Container-Klasse definiert. Damit die Elemente in einer horizontalen Reihe angezeigt werden, schreiben wir display: inline-flex; Das ist wichtig, um die Social-Media-Icons nebeneinander anzuzeigen. list-style: none; entfernt die Standard-Aufzählungspunkte, die normalerweise bei ungeordneten Listen (<ul>) angezeigt werden.
.wrapper .icon {
position: relative;
background: #ffffff;
border-radius: 50%;
padding: 15px;
margin: 10px;
width: 50px;
height: 50px;
font-size: 22px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
cursor: pointer;
transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}Im .wrapper .icon definieren wir den Stil für jedes Social-Media-Icon innerhalb des Containers. Mit position: relative; stellen wir sicher, dass das Icon relativ zu seinem normalen Fluss positioniert wird, damit wir das ::before-Pseudo-Element und den Tooltip richtig platzieren können. Damit das Symbol und der Text im Icon zentriert werden und der Text unter dem Symbol angeordnet ist schreiben wir display: flex; justify-content: center; align-items: center; flex-direction: column;.cursor: pointer; ändert den Mauszeiger auf ein Zeigefinger-Symbol, um anzuzeigen, dass das Icon anklickbar ist. Am Ende fügen wir noch mit transition: all 0.2s cubic-bezier(0.68, -0.55, 0.265, 1.55); eine Animation hinzu, wenn das Icon den Hover-Effekt erhält.
.wrapper .tooltip::before {
position: absolute;
content: "";
height: 8px;
width: 8px;
background: #ffffff;
bottom: -3px;
left: 50%;
transform: translate(-50%) rotate(45deg);
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}.wrapper .tooltip::before ist für das Pseudo-Element verantwortlich, das den Pfeil unter dem Tooltip darstellt. position: absolute; positioniert dieses Pseudo-Element relativ zum .icon-Container. Mit content: ""; fügen wir jetzt ein leeres Element hinzu, das wir für den Pfeil verwenden. Um die Größe für den Pfeil festzulegen, schreiben wir height: 8px; width: 8px;. background: #ffffff; setzt die Hintergrundfarbe des Pfeils auf Weiß.Damit der Pfeil unter dem Tooltip erscheint, müssen wir es etwas nach unten verschieben. Das machen wir mit bottom: -3px;. left: 50%; positioniert es dann horizontal in der Mitte des .icon-Containers. Mit transform: translate(-50%) rotate(45deg); zentrieren wir den Pfeil horizontal und drehen ihn um 45 Grad, um wie ein Pfeil auszusehen. davor war es ein Quadrat. Danach fügen wir mit transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); eine weiche Animation hinzu, wenn der Pfeil angezeigt wird.
.wrapper .tooltip {
position: absolute;
top: 0;
font-size: 15px;
background: #ffffff;
color: #ffffff;
padding: 5px 8px;
border-radius: 10px;
box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}Mit .wrapper .tooltip: wird der Stil für den Tooltip definiert, der beim Überfahren eines Icons angezeigt wird. Hier fügen wir wir dieverse Stilelemente wie Position, Farbe und Schatten hinzu. Außeredem machen wir mit opacity: 0; den Tooltip standardmäßig unsichtbar und mit pointer-events: none; stellen wir sicher, dass der unsichtbare Tooltip auch nicht klickbar ist. Danach fügen wir noch mit transition: all 0.3s cubic-bezier(0.68, -0.55, 0.265, 1.55); eine weiche Animation hinzu, wenn der Tooltip erscheint.
.wrapper .icon:hover .tooltip {
top: -45px;
opacity: 1;
visibility: visible;
pointer-events: auto;
}.wrapper .icon:hover .tooltip: stellt sicher, dass der Tooltip erscheint und nach oben verschoben wird, wenn der Mauszeiger über das Icon schwebt. In dem Fall hebt top: -45px; den Tooltip um 45 Pixel nach oben, wenn er sichtbar wird. opacity: 1; macht den Tooltip sichtbar und visibility: visible; stellt sicher, dass der Tooltip sichtbar ist. Am Ende machen wir mit pointer-events: auto; den Tooltip wieder klickbar.
.wrapper .icon:hover span,
.wrapper .icon:hover .tooltip {
text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);
}Wenn der Mauszeiger über einem Icon schwebt, erhält der Text im Icon und im Tooltip einen leichten Schatten, um einen visuellen Effekt zu erzeugen. Das erzeugen wir hier mit text-shadow: 0px -1px 0px rgba(0, 0, 0, 0.1);.
.wrapper .facebook:hover,
.wrapper .facebook:hover .tooltip,
.wrapper .facebook:hover .tooltip::before {
background: #1362c9;
color: #ffffff;
}Jetzt müssen wir noch die Farbe für das Icon und das Tooltip festlegen, wenn der Mauszeiger darüber schwebt. In dem Fall nehmen wir hier für Facebook ein dunkles Blau background: #1362c9; für den Hintergrund des Icons und des Tooltips und Weiß color: #ffffff; für den Text.
Fertig!
Du hast es geschafft! Wenn du jetzt die HTML-Datei in deinem Browser öffnest, kannst du die einzelnen Buttons sehen und wenn du mit der Maus darüber fährst, öffnen sich die Tooltips und die Icons verfärben sich.
