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.
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
Kommentare sind geschlossen.