Download-Button
In diesem Tutorial zeigen wir dir, wie du eines der wichtigsten UI-Elemente mithilfe von HTML und CSS erstellen kannst: Der Button!
Dafür haben wir zwei Varianten eines Download-Buttons erstellt und anhand von Codebeispielen ausführlich erklärt.
Einführung
Im Folgenden stellen wir euch zwei Download-Button vor, die beide einen Hover- und Klick-Effekt besitzen. Einer davon wurde mit einem vorgefertigten Button-Tag erstellt und der andere mit einer normalen div-Box.
Der erste Button besteht aus einem Kreis, in der sich eine Pfeilspitze und daneben die Aufschrift ›Download‹ befindet. Beim Hovern wird der Kreis zu einem Oval und dehnt sich bis zum Wortende aus, wobei die Pfeilspitze zu einem Pfeil wird. Die Schriftfarbe ändert sich von weiß zu türkis. Der Schatten unterhalb verkleinert sich beim klicken.
Der zweite Button befindet sich in einer Kreiskontur. In diesem befindet sich ein vektorbasiertes Icon. Beim Hovern streckt sich der Kreis nach links und rechts und das SVG wird türkis. Unterhalb steht erneut die Aufschrift ›Download‹, bei der sich der Schatten beim anklicken ebenfalls verkleinert.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<!-- Code für Button1 und Button2 -->
</body>
</html>HTML Datei
Erstelle die HTML-Datei mit dem Namen index.html. Füge anschließend die Pflichtelemente ein. Dazu gehört das Stammelement <html> mit dem !DOCTYPE, die Nennung der Sprache lang="en", der Head sowie ein Body. Im Body erstellen wir dann den Code für die Buttons. Sinnvoll ist es, die dazugehörige CSS-Datei gleich zu Beginn zu erstellen und sie im <head> mit link rel="stylesheet" href="stylesheet.css">zu verlinken .
container1
<div id="container1">
<button class="download">
<span class="icon arrow"></span>
<span class="button-text1">Download</span>
</button>
</div>Kommen wir zum Grundgerüst von unserem ersten Button.
Erstelle eine <div> mit der ID ›container1‹. In dieser div-Box findet der erste Button später seinen Platz. Der eigentliche Button entsteht durch den Tag <button>. Diesem geben wir den Klassennamen ›download‹.
Nun erstellst du das Inline-Element <span>. In diesem wird später mithilfe des CSS ein Kreis und ein Pfeil-Icon erstellt.
Für die Beschriftung erstellst du ein weiteres Inline-Element mit dem Inhalt ›Download‹.
container2
<div id="container2">
<div class="button2">
<div class="icon2">
<svg version="1.1" id="Ebene_1" xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 166.81 144.18" style="enable-background:new 0 0 166.81 144.18;"
xml:space="preserve">
<style type="text/css">
.st0{fill: currentColor;}
</style>
<path class="st0" d="M134.98,95.22v23.11c0,0.66-0.54,1.2-1.2,1.2H34.13c-0.66,0-
1.2-0.54-1.2-1.2V95.22c0-0.66,0.54-1.2,1.2-1.2
h2.71c0.66,0,1.2,0.54,1.2,1.2v17.44c0,0.66,0.54,1.2,1.2,1.2h89.44c0.66,0,1.2-
0.54,1.2-1.2V95.22c0-0.66,0.54-1.2,1.2-1.2h2.7
C134.44,94.02,134.98,94.56,134.98,95.22z"/>
<path class="st0" d="M66.63,82.71c-0.52-0.52-0.52-1.36,0-1.88l1.73-1.73c0.52-
0.52,1.36-0.52,1.88,0l10.67,10.67V25.5
c0-0.74,0.6-1.33,1.33-
1.33h3.01c0.74,0,1.33,0.6,1.33,1.33v64.29L97.27,79.1c0.52-0.52,1.36-
0.52,1.88,0l1.73,1.73
c0.52,0.52,0.52,1.36,0,1.88l-17.1,17.1h-0.05"/>
</svg>
</div>
</div>
<div class="button-text2">Download</div>
</div>Daraufhin folgt das Grundgerüst des zweiten Buttons.
Dafür benötigen wir wieder einen div-Container für die Platzierung auf dem Display. Darin braucht es sowohl eine div mit dem Klassennamen ›button2‹ als auch eine mit dem Namen ›icon2‹.
In dem ›Icon2-div‹ ist der Quelltext einer SVG eingebunden. Damit die Farbe der SVG später mit der CSS Eigenschaft color: geändert werden kann, wird im Quellcode die angegebene Farbe bei fill: mit currentColor ersetzt.
Dann fügst du mithilfe eines divs das Wort ›Download‹ erneut ein.
CSS
Nun folgt der CSS-Part, der für die eigentliche Darstellung und Gestaltung der Buttons sorgt.
*::before, *::after
*::before, *::after {
box-sizing: border-box;
}Die Selektoren *::before, *::after selektieren alle entsprechenden Pseudoelemente.
Im ursprünglichen CSS-Boxenmodell gilt die im CSS festgelegte Breite nur für den Content. Der Innenabstand (padding) und der Rahmen der Box (boder) kommen zusätzlich auf die Breite dazu. Da dies oft zu Unstimmigkeiten führt, haben wir uns für die Deklaration box-sizing : border-Box; entschieden. Dadurch wird sichergestellt, dass bei der Angabe der Breite, die Box am Ende auch genau diese Breite besitzt.
body
body {
display: flex;
font-family: sans-serif;
font-size: 1rem;
line-height: 1.5;
align-items: center;
justify-content: center;
margin: 0;
background: lightseagreen;
}Anschließend definierst du im body, die Schriftart, die Schriftgröße, die Zeilengröße, die Position der Elemente, den Außenabstand und die Hintergrundfarbe. Mit der Deklaration display: flex; legst du fest, dass die beinhalteten Container sich nebeneinander anordnen.
Nach diesen ersten CSS-Anweisungen sollten deine zwei Buttons folgendermaßen auf deinem Display erscheinen:
Button Nummer 1
container1
/*Button 1 */
#container1 {
width:250px;
height:100px;
margin-top: 10%;
margin-left: auto;
margin-right: 20px;
color:white;
}Um den später erzeugten Button per CSS an gewünschte Position zu bringen, sprechen wir mit dem Selektor #container1 unseren div-Container mit der entsprechenden ID an.
Mit den folgenden Deklarationen width, height, margin-top, margin-left und margin-right, schiebst du nun den Container in die linke Mitte des Displays. Als Farbe für die enthaltenen Elemente geben wir Weiß vor.
button
button {
width: 12rem;
height: auto;
position: relative;
cursor: pointer;
display: inline-block;
background: transparent;
padding: 0;
margin-left: 10%;
border: 0;
font-size: inherit;
font-family: inherit;
}Achtung: Hier ist ›button‹ kein Klassenname, sondern ein ›Tag‹, weswegen wir beim selektieren keinen Punkt benötigen.
Am Anfang definierst du die Breite und Höhe des Buttons. Dabei wird nur die Breite auf den festen Wert 12remgesetzt. Durch den Wert auto, bei der Höhe, wird der Wert für eine passende Höhe automatisch berechnet.
Mit position: relative liegt die Position des Buttons immer relativ zu seinem ursprünglichen Platz im HTML-Dokument. Fast alle folgenden Klassen haben deshalb diese Deklaration.
Damit Elemente innerhalb von button als Boxen angesehen werden, aber dennoch in einer Linie stehen, schreibst du display: inline-block;.
Durch die Deklaration cursor: pointer; verändert sich der Cursor beim hovern über dem Button, zu einem Pointer. Das ist vorallem bei anklickbaren Flächen, wie Buttons, eine wichtige Eigenschaft, damit der Benutzer verstehen kann, dass sie mit diesen Flächen interagieren können.
Den background wollen wir hier transparent haben.
button hat durch den Browser-Stylesheet einen vorgegebenen Innenabstand sowie einen schwarzen Rand. Da wir diesen nicht wollen, musst du padding: 0; und border: 0; setzen.
Um den Button weiter rechts zu positionieren, setzen wir margin-left: auf 10%;.
Mit dem Schlüsselwort inherit erzwingen wir das Erben aus dem Elternelement. Welcher in diesem Fall, der Schriftart aus dem umschließenden Container, also dem Body, entspricht.
circle
button.download .circle {
position: relative;
display: block;
background: white;
width: 3rem;
height: 3rem;
margin: 0;
border-radius: 1.625rem;
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}Mit diesen Anweisungen werden wir den weißen Kreis erstellen, der sich beim hovern zu einem langen Oval transformiert.
Auch hier soll position: relative; sein. Die Eigenschaft display setzt man auf block, wodurch Elemente innerhalb der Box ›circle‹ immer untereinander in einer neuen Zeile stehen.
Anschließend definieren wir wieder die Größe und den Außenabstand. Da wir am Ende einen runden Kreis haben wollen, brauchen wir eine quadratische Box. Daher geben wir für Breite und Höhe die selben Werte an: width: 3rem; height: 3rem;.
Durch den border-radius runden wir die Ecken der ›circle-Box‹ schließlich so weit ab, dass es einen Kreis ergibt.
Mit background: white; legen wir die Hintergrundfarbe Weiß fest.
An diesem Punkt haben wir jetzt einen weißen Kreis auf unserer lightseagreenen Fläche. Die eigentliche Magie dieses UI-Elements geschieht aber durch die letzte Eigenschaft: transition.
Transitions, in deutsch: Übergänge, ermöglichen es uns Eigenschaftswerte, wie zum Beispiel die Breite, über einen bestimmten Zeitraum hinweg reibungslos zu ändern. Unsere Transition ist folgendermaßen aufgebaut: transition: <property> <duration> <timing-function>;.
Als Eigenschaft (property) geben wir erst einmal all an. Im späteren Verlauf wird die Transition durch das Verändern der Eigenschaft width, mithilfe der Pseudoklasse :hover, ausgelöst. Für die Dauer (duration) geben wir 0.45s an. Als ›timing-function‹ haben wir uns für den cubic-bezier(n,n,n,n) entschieden. Die ersten zwei Werte stellen die Anfangszeit und den Anfangszustand dar, die letzten zwei Stellen die Endzeit und den Endzustand.
icon
button.download .circle .icon {
position: absolute;
background: lightseagreen;
top: 0;
bottom: 0;
margin: auto;
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}In dieser Klasse erstellen wir, mithilfe der folgenden Subklasse ›icon‹, das Pfeil-Icon in unserem Kreis.
Die position wird diesmal auf absolut gesetzt. Anders als bei relative, wird die Box dann nicht nach ihrem gewohnten Platz im Dokumentenfluss positioniert, sondern nach der Position ihres Vorfahren.
Der Hintergrund der Box ›icon‹ hat die Farbe lightseagreen, die Eigenschaften top und bottom werden auf 0 gesetzt und margin bleibt bei dem vom Browser-Stylesheet automatisch generierten Wert.
Damit das Icon sich mit dem Kreis mitbewegt, verwenden wir hier wieder dieselbe Transition wie bei der Elternklasse ›circle‹.
arrow
button.download .circle .icon.arrow {
background: none;
width: 1.125rem;
height: 0.125rem;
left: 0.625rem;
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}Für den Pfeil geben wir explizit keinen Hintergrund an. Die Höhe und Breite wird auf 1.125rem; und 0.125rem; gesetzt.
Auch hier braucht es dieselbe Transition wie zuvor in den Klassen ›circle‹ und ›icon‹.
arrow::before
button.download .circle .icon.arrow::before {
position: absolute;
width: 0.625rem;
height: 0.625rem;
top: -0.25rem;
right: 0.0625rem;
content: "";
border-top: 0.125rem solid lightseagreen;
border-right: 0.125rem solid lightseagreen;
transform: rotate(45deg);
}Jetzt wird der Pfeil erzeugt, so wie er aussieht, bevor man drüber hovert. Aus dem Grund wird auch das Pseudoelement ::before benötigt.
Die position wird erneut auf absolute gesetzt.
Mit width und height wird schließlich die Größe der Box festgelegt. Die Position wird durch top und right minimal korrigiert. So passt die Pfeilspitze am Ende auch richtig auf den beim Hovern entstehenden Pfeilstrich.
Sichtbar wird die kleine Box durch die letzten vier Deklarationen. Dabei wird dem oberen und rechten Rand der Box ein durchgezogener Rahmen mit der Dicke 0.125rem und der Farbe lightseagreen zugewiesen. Um die Box zu dem finalen Pfeil zu drehen, nutzen wir die Eigenschaft transform und rotieren sie mit rotate(45deg); um 45 Grad.
button-text1
button.download .button-text1 {
position: absolute;
color: white;
top: 0;
bottom: 0;
left: 0;
right: 0;
padding: 0.75rem 0;
margin: 0 0 0 1.85rem;
font-weight: 700;
line-height: 1.6;
text-align: center;
text-transform: uppercase;
transition: all 0.45s cubic-bezier(0.65, 0, 0.076, 1);
}Beschäftigen wir uns nun mit dem Schriftzug ›Download‹, der sich rechts neben dem weißen Kreis befindet.
Die position wird wieder auf absolute und die Schriftfarbe auf Weiß gesetzt. Für top, bottom, left und right werden explizit die Werte 0 angegeben.
Hier wird für padding und margin eine Kurzschreibweise angewandt. Bei padding steht der erste Wert 0.75rem für padding-top und padding-bottom und der zweite Wert 0 für padding-right und padding-left. Stehen vier Werte da, wie bei margin: 0 0 0 1.85rem;, so stehen die Werte der Reihenfolge nach für margin-top, -right, -bottom und -left.
Die folgenden vier Deklarationen beziehen sich auf die Schrift selbst.
font-weight gibt die Dicke einer Schrift an. 700 entspricht dabei einer dicken Schrift.
text-align: center; richtet die Schrift mittig aus. line-height: 1.6; gibt die Höhe der Zeilen an und ist mit dem Wert 1.6 etwas größer als die automatische Einstellung. Mit der Deklaration text-transform: uppercase; wird der Text in Großbuchstaben geschrieben.
Auch hier brauchst du wieder dieselbe Transition, wie bei den Klassen ›icon‹ und ›circle‹ zuvor auch.
Dein Button sollte nun so aussehen:
button:hover
/*Beim Hovern*/
button:hover .circle {
width: 100%;
box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}
button:hover .circle .icon.arrow {
background: lightseagreen;
transform: translate(1rem, 0);
}
button:hover .button-text1 {
color: lightseagreen;
}So, jetzt kann der erste Button sich schon sehen lassen. Fehlt nur noch der Hover-Effekt. Diesen können wir mithilfe der Pseudoklasse :hover erzeugen.
Eine kurze Erklärung noch zu der Schreibweise der Selektoren. Die Schreibweise button:hover .circle bedeutet in Worten ausgedrückt: Falls der Cursor über die Box ›button‹ hovert, so gelten folgende Anweisungen für die Box ›circle‹.
Die Box ›circle‹ wird also beim Hovern auf 100% (relativ zum Elternelement) vergrößert. Da wir vorher in der Klasse ›circle‹ eine Transition eingebaut haben, wird diese nun durch die Angabe der Eigenschaft width ausgelöst. Das bedeutet der Übergang von der vorherigen Breite zu der neuen Breite verläuft, wie gewünscht, flüssig.
Desweiteren wird ein Schatten zu unserem Oval box-shadow: 0px 5px 10px rgba(0,0,0,0.5); hinzugefügt. Die ersten zwei Werte geben die Verschiebung des Schattens zur Box an. Der dritte Wert gibt an, wie verschwommen der Schatten sein soll. Zu guter Letzt kommt die Farbe.
Von der Box ›arrow‹, also unserem Pfeil, verlangen wir, dass er beim hovern seine Hintergrundfarbe von weiß zu lightseagreen ändert und sich um 1rem auf der x-Achse verschiebt. Die Verschiebung erreichst du mit der Eigenschaft transform und dem Wert translate(x, y);.
Den Text in der Box ›button-text1‹ stellen wir noch auf die Farbe lightseagreen um, damit auch die Farbe des Schriftzuges ›Download‹ seine Farbe von weiß zu lightseagreen wechselt.
So sieht der Button nun im Hover-Zustand aus:
button:active
/*Beim Klicken*/
button:active .circle {
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
transition: .05s;
}Durch die Pseudoklasse :active können wir das Aussehen von Boxen bestimmen, wenn darauf geklickt wird.
Das Einzige, das wir hier beeinflussen wollen, ist der Box-Schatten. Dieser soll sich beim Klicken ein Stückchen verkleinern.
Mit transition: .05s; schreibst du dem Klick-Effekt eine bestimmte Zeit vor.
Unser zweiter Button
container2
/* Button 2 */
#container2 {
width:250px;
height:100px;
margin-top: 5%;
margin-left: 20px;
margin-right: auto;
color: white;
}Bei unserem zweiten Button wirst du ziemlich viele Parallelen zu unserem ersten Button finden. Daher werden wir in diesem Abschnitt nicht noch einmal auf alle Schlüsselwörter im Detail eingehen.
Wie der erste Button, wird auch der zweite durch einen div-Container und den entsprechenden Anweisungen width, height, margin-top, margin-left und margin-right, in die gewünschte Position gebracht. Auch hier wollen wir wieder eine weiße Schrift.
button2
.button2 {
position: relative;
cursor: pointer;
width:50px;
height:50px;
padding:5px;
margin: 10% auto;
border:2px solid white;
border-radius:100px;
transition: .5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}Die ›button2-Box‹ wird auf position: relative; gestellt, sowie die Maße für ein Quadrat angegeben. Damit beim Hovern wieder der Cursor zum Pointer wird, definierst du es hier erneut. Für den Außenabstand haben wir wieder die Kurzschreibweise verwendet. Die 10% stehen für den oberen und unteren Außenabstand. Die anderen Werte werden automatisch berechnet.
Der Rand von unserem Button soll 2px dick, durchgehend und weiß sein. Die Ecken der Box sollen um einen Radius von 100px abgerundet werden. Dabei entsteht ein Kreis.
Mit transition erzeugen wir einen Übergang. Dieser soll 0.5s dauern und beinhaltet die ›timing-function‹ cubic-bezier. Diese Transition wird später beim Hovern durch die Angabe eines Innenabstandes ausgelöst.
icon2
.icon2 {
position: relative;
width: 50px;
top: 50%;
transform: translateY(-50%);
}In dieser Klasse ist der vorher im HTML eingebundene SVG-Quelltext enthalten. Für unseren selbsterstellten SVG-Icon wird die position wieder relative und die Maße so festgelegt, dass sich unser Icon in der Mitte des Kreises befindet. Erreichen kannst du das mit den inzwischen bekannten Methoden, durch die Angabe von top und der Eigenschaft transform mit dem Wert translateY.
button-text2
.button-text2 {
text-align:center;
}Damit unser Schriftzug ›Download‹ später zentriert steht, musst du den Wert von text-align auf center setzen.
So sollte dein Button nun aussehen:
button2:hover
/*Beim Hovern*/
.button2:hover {
background-color: white;
color: lightseagreen;
padding-left: 50px;
padding-right: 50px;
box-shadow: 0px 5px 10px rgba(0,0,0,0.5);
}Nun folgt der Hover-Effekt von unserem zweiten Button.
Beim Hovern soll der Hintergrund weiß werden, deshalb musst du dies entsprechend mit background-color definieren. Die Farbe unseres Icons soll dabei lightseagreen werden, weshalb du dies mit der Eigenschaft color noch festlegen musst.
Durch die Angabe des rechten und linken Innenabstandes von 50px wird die Transition ausgelöst und der weiße Kreis zu einem Oval verlängert. Dabei bleibt das Icon unbewegt in der Mitte. Auch hier soll beim Hovern ein Schatten unter der Box erscheinen.
So sieht der Button nun im Hover-Zustand aus:
button2:active
/*Beim Klicken*/
.button2:active {
box-shadow: 0px 2px 5px rgba(0,0,0,0.2);
transition: .05s;
}Wenn man nun auf den Button klickt, soll der Schatten sich verkürzen. Daher musst du die Werte verringern. Die Dauer dieses Klick-Effekts wird wieder durch transition auf .05s gesetzt.
Herzlichen Glückwunsch, du hast es geschafft! Du bist nun am Ende unseres Tutorials angelangt.
Schlusswort
Wir empfehlen dir, noch ein wenig an dem entstandenen Code herumzuprobieren. Damit gelangst du zu einem tieferen Verständnis für deinen Code. Als Hilfestellung dafür, haben wir hier unseren gesamten Quellcode für dich zum Downloaden bereitgestellt.
Wir hoffen es hat dir weitergeholfen und du konntest etwas lernen!
Danke für deinen Besuch.
Quellcode
Tutorial-Dateien herunterladen
Quellen
https://www.w3schools.com/cssref/func_cubic-bezier.php
