Das <button> Element ist für die Benutzerinteraktion konzipiert, um Beispielsweise ein Kontaktformular abzusenden, etwas hoch- oder herunterzuladen oder um etwas zu „liken“. Mithilfe von Tastatur, Maus, „Touch“ oder gar per Sprachbefehl kann ein sogenanntes click
Event ausgelöst werden, welches die Interaktion auslöst.
Jeder Browser bringt seine eigenen Standard-Styles für das Button-Element mit sich, so dass sie direkt und ohne Anpassung verwenden werden können. Im Folgenden wollen wir uns verschiedene Beispiele ansehen, wie du die Buttons noch aufpeppen kannst.
Barrierefreie Buttons
Ein Überblick über die Erstellung barrierefreier Buttons, welche sowohl im Dark Mode als auch im Light Mode funktionieren. Link zum Artikel von Adam Argyle und zum Source Code auf Github.
3D-Button
Josh Comeaus Tutorial featured nicht nur einen richtig schönen Button, auch seine Erklärungen sind einfach zu verstehen und mit einigen interaktiven Elementen versehen.
Hier der 3D-Button mitsamt dem dazugehörigen HTML & CSS:
Hier das CSS zum 3D-Button
.pushable { position: relative; border: none; background: transparent; padding: 0; cursor: pointer; outline-offset: 4px; transition: filter 250ms; } .shadow { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; background: hsl(0deg 0% 0% / 0.25); will-change: transform; transform: translateY(2px); transition: transform 600ms cubic-bezier(.3, .7, .4, 1); } .edge { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 12px; background: linear-gradient( to left, hsl(340deg 100% 16%) 0%, hsl(340deg 100% 32%) 8%, hsl(340deg 100% 32%) 92%, hsl(340deg 100% 16%) 100% ); } .front { display: block; position: relative; padding: 12px 42px; border-radius: 12px; font-size: 1.25rem; color: white; background: hsl(345deg 100% 47%); will-change: transform; transform: translateY(-4px); transition: transform 600ms cubic-bezier(.3, .7, .4, 1); } .pushable:hover { filter: brightness(110%); } .pushable:hover .front { transform: translateY(-6px); transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5); } .pushable:active .front { transform: translateY(-2px); transition: transform 34ms; } .pushable:hover .shadow { transform: translateY(4px); transition: transform 250ms cubic-bezier(.3, .7, .4, 1.5); } .pushable:active .shadow { transform: translateY(1px); transition: transform 34ms; } .pushable:focus:not(:focus-visible) { outline: none; }
Und hier das HTML zum 3D-Button
<button class="pushable"> <span class="shadow"></span> <span class="edge"></span> <span class="front"> Push me </span></button>
Knopf
Knopf ist eine CSS-Bibliothek zum einfachen Erstellen verschiedener Schaltflächenstile, die über CSS-Variablen an das Design Deiner Marke angepasst werden können.
Papierflugzeug-Button
Der “Paperplane“-Button von Aaron Ikers Stift faltet sich zusammen und fliegt mit ein wenig Hilfe von Greensock-JS sehr hübsch davon.
Neumorphische CSS-Radio-Buttons
Neumorphische CSS-Toggle-Buttons
Allgemeine Call-to-Action Buttons
Gradient Text Overlay Button
Ein Pen von Sarah Fossheim.
Click me!
Click me! (2)
Liquid Fill
Some Text
Smash to Submit Button
Mehr erfahren (Learn more)
Learn more (2)
Go!
Alle Buttons sind für private und kommerzielle Zwecke freigegeben. Da sich Nutzungsbedingungen stets ändern können, solltest du vor der konkreten Verwendung die Lizenz noch einmal überprüfen. Sicher ist sicher.
Minimalistische Ghost CSS Buttons im Trend
Die Zeiten der Gloss- und 3D-Effekte sind – zumindest vorerst – vorbei. Beim Webdesign ist derzeit vor allem Minimalismus angesagt. Das spiegelt sich auch beim Aussehen von Buttons wieder. Sogenannte Ghost-Buttons sind im Kommen und passen perfekt in die zurückhaltende Gestaltung vieler zeitgemäßer Websites, die auf Flat-Design oder Material-Design setzen. Der eigentliche Ghost-Button besteht nur aus einem meist dünnen Rahmen und dem darin stehenden Text. Weniger zurückhaltend lässt sich ein Button kaum gestalten – vorausgesetzt, man soll ihn auch noch als Button erkennen können.
Website der Agentur „Parallax“ mit einfachem Ghost-Button
Einfach gestaltet und ausgezeichnet
Ghost-Buttons sind einfach gestaltet und ebenso einfach und schnell per Stylesheets ausgezeichnet. Bei klassischen Buttons, die per „<button>“- oder „<input>“-Element ausgezeichnet werden, reicht es im Grunde aus, eine Rahmenfarbe zu setzen und den Hintergrund zu entfernen. Standardmäßig sind diese Elemente nämlich immer mit einer Hintergrundfarbe ausgestattet.
input { background: none; border: 1px solid black; color: black;}
Nicht immer ist ein Button durch ein entsprechendes Button-Element ausgezeichnet. Oft verbergen sich dahinter auch Links, die per „<a>“-Element ausgezeichnet sind. Hier ist die Gestaltung ebenso einfach. Optisch unterscheiden sich echte Buttons von einfachen Links dann nicht mehr.
Auf den Hintergrund kommt es an
Minimalismus alleine ist kein Garant für eine gut gestaltete Website. Das gilt auch für Ghost-Buttons. Das Umfeld muss passen, damit Ghost-Buttons auch elegant wirken und vor allem auch aufgrund ihrer Schlichtheit nicht untergehen.
Da vor allem großformatige Bilder derzeit im Trend sind, lassen sich Ghost-Buttons ausgezeichnet in Kombination mit ausdrucksstarken Hintergrundbildern darstellen.
In den meisten Fällen werden per Ghost-Buttons keine klassischen Button-Funktionen – wie das Versenden eines Formulars – ausgelöst. Meist sind es Links, die besonders hervorgehoben werden sollen. Im Beispiel der beiden Agenturen „Parallax“ und „Creative Ad Awards“ sind es die Links zu Arbeitsproben, die durch Ghost-Buttons dargestellt werden. Präsentiert werden die Buttons auf Bildern, die das Browserfenster (annähernd) ausfüllen.
Website der Agentur „Creative Ad Awards“
Neben großformatigen Bildern sieht man immer häufiger auch formatfüllende Videos als Hintergrund. In Kombination mit diesem Trend wirken Ghost-Buttons ebenfalls sehr eindrucksvoll – vor allem, weil sie aufgrund ihrer Schlichtheit wenig Platz brauchen und dem Video wenig Sichtbarkeit nehmen. Stehen die Buttons in einem guten Kontrast zum Video, bleiben sie trotz des animierten Hintergrunds gut sichtbar und fallen auf.
Website der Agentur „Union Room“ mit Videohintergrund
Mit Details und Besonderheiten glänzen
Wer auf den Ghost-Button-Trend aufspringen will, sollte zusehen, dass die Buttons trotz ihrer Schlichtheit dennoch etwas Besonderes haben. Gerade bei einem minimalistischen Design ist das immer eine Herausforderung. Daher sollte man sich gut überlegen, wie man den Buttons eine eigene individuelle Note hinzufügen kann. Dank CSS3 sind hier der Kreativität kaum Grenzen gesetzt. Man kann mit abgerundeten Ecken und Transparenzen arbeiten, eine ausdrucksstarke Schriftart verwenden und vor allem mit dezenten Animationen und Transitions aufwarten.
Website der Agentur „Iuvo“ mit animierten Ghost-Buttons
Dabei müssen die Animationen nicht zwingend so aufwendig sein, wie bei der Agentur „Iuvo“. Oft sind dezente Fade-in- und Fade-out-Effekte eleganter. Oder man lässt einfach den Rahmen des Ghost-Buttons animieren – wie auf der Website des Entwicklers Nicolas Zezuka.
Website mit schlichtem animiertem Ghost-Button
Ghost-Buttons nicht beschränkt auf einen Link
Der Einsatz von Ghost-Buttons muss bei weitem nicht darauf beschränkt sein, dass per Klick eine Seite geladen wird. Er kann auch verwendet werden, um die Funktion eines Radio-Buttons zu übernehmen. Die Website der App „Couple“ nutzt Ghost-Buttons, um darüber das Geschlecht auswählen zu können.
Website mit Radio-Ghost-Button
Bei vielen Ghost-Buttons werden per Hover-Effekt Rahmenfarbe und -form verändert oder eine Hintergrundfarbe hinein animiert. Eine Alternative dazu ist, den Buttontext zu animieren. Dieser kann beispielsweise zu einer Seite hin verschwinden. Bei Bedarf lässt sich auch während des Hover-Status ein anderer Text einblenden, um eine Zusatzinformation im Button unterzubringen.
Website mit animiertem Buttontext
Fazit
Richtig in Szene gesetzt, können Ghost-Buttons sehr eindrucksvoll sein. Die Beispiele zeigen, dass vor allem der Hintergrund stimmen muss und kleine Animationseffekte für die individuelle Note sorgen. Je schlichter ein Design ist, desto prägnanter muss es auch sein. Nur so hebt man sich ab und verhindert, im Design-Allerlei unterzugehen.
8 Antworten
WOW, Meeegaaa! Vielen Dank für die Bereitstellung 🙂
Cheers
Julia
Hallo, jemand eine Idee, wie ich das hinbekomme, dass die CSS nur auf den Hover Button angeand wird und nicht gleich auf die ganze Seite
Hallo Klaus, vielleicht hilft Dir ja einer der CSS-Selektoren weiter?
Hi Markus,
nicht so ganz 🙁 – bin auch ehrlich gesagt mit css nicht so fit.
Also. mit “link” kann ich die css ja laden, wirkt sich dann aber auf die gesamte Seite aus
Ich suche aber, wenn überhaupt möglich, eine Lösung, dass die css eben nur auf dem div Auswirkungen hat.
Hintergrund: Ich nutze ein Content System und will da nur eines der hier vorgestellten Buttons einbauen
Wahnsinns gute Button! 🙂 Danke fürs Teilen!
Wirklich tolle Button Kollektion! Erspart mir eines an Zeit bei einigen Projekten, vielen Dank dafür!
Vielen lieben Dank für diese Mega-Buttonsammlung!
Sehr informativer Beitrag, vielen Dank