Button Designs: 24 moderne CSS Buttons mit Hover-Effekt
Buttons sind ein zentrales Element jeder Website – sie lenken Nutzer, steigern die Conversion und prägen das Design maßgeblich. In diesem Beitrag zeige ich dir eine kuratierte Sammlung moderner Button Designs, die du direkt für deine eigenen Webprojekte nutzen kannst. Von minimalistischen Styles bis zu auffälligen Hover-Effekten findest du hier Inspiration und praxisnahe CSS-Beispiele für zeitgemäßes Webdesign.
Kopiere dir gern den CSS-Code um den Button in deinem (Web)-Projekt zu nutzen. Du muss lediglich die Klasse in deinem <a>-Tag hinterlegen.
zb <a href=“#“ class=“btn-2″>Mehr erfahren</a>
Oder du nutzt diese Seite einfach als Inspiration und suchst dir einen Button und den passenden Hover-Effekt.
Klassische Buttons
Zu manchen Designs passen keine ausgefallenen Buttons. Sie müssen nur gut sichtbar sein und der :hover (mouseover) Effekt muss gut erkennbar sein, damit der User weiß, dass man hier auf einen Link klickt, sollte man den Button betätigen.
.btn-1{
padding: 14px 28px;
font-weight: 600;
transition: all .3s ease;
text-decoration: none;
display: inline-block;
background:#000; color:#fff;
}
.btn-1:hover {
background:#777;
}
.btn-2{
padding: 14px 28px;
border-radius: 15px;
border: 2px solid #000;
font-weight: 600;
transition: all .3s ease;
text-decoration: none;
display: inline-block;
color:#000;
}
.btn-2:hover {
background:#000;
color: #fff;
}
.btn-3{
padding: 14px 28px;
border-radius: 0;
border: 2px solid #000;
font-weight: 600;
transition: all .3s ease;
text-decoration: none;
display: inline-block;
color:#000;
}
.btn-3:hover {
border-radius: 15px;
}
Buttons mit Pfeil
.btn-arrow-1 {
padding:14px 15px 14px 20px;
font-weight:600;
border:none;
display:inline-block;
transition:.35s ease;
background:#6d9f9e;
color:#fff;
position:relative;
text-decoration: none
}
.btn-arrow-1:after{
content:’→‘;
display: inline-block;
padding: 0 10px 0 10px;
transition: all .35s;
}
.btn-arrow-1:hover:after{
padding: 0 0px 0 20px;
}
.btn-arrow-4 {
padding:10px 12px 10px 28px;
font-weight:600;
border:none;
cursor:pointer;
display:inline-flex;
align-items:center;
gap:10px;
position:relative;
transition:.3s ease;
text-decoration: none;
background:#50a06d;
color:#fff;
border-radius:999px;
}
.btn-arrow-4:after{
content:’→‘;
background:rgba(255,255,255,.25);
width:30px;
height:30px;
display:grid;
place-items:center;
border-radius:50%;
transition:.3s;
}
.btn-arrow-4:hover:after{
background: #fff;
color: #50a06d;
transform:rotate(360deg);
}
.btn-arrow-2 {
padding:14px 30px;
font-weight:600;
cursor:pointer;
border:none;
display:inline-block;
transition:.35s ease;
background:#601343;
color:#fff;
position:relative;
text-decoration: none
}
.btn-arrow-2::after{
content:’→‘;
position:absolute;
right:12px;
opacity:0;
transform:translateY(10px);
transition:.3s;
}
.btn-arrow-2:hover::after{
opacity:1;
transform:translateY(0);
}
.btn-arrow-5 {
padding:16px 0;
background:#000;
color:#fff;
border:none;
letter-spacing: 0px;
position:relative;
overflow:hidden;
transition: all .3s;
text-decoration: none;
text-align: center;
width: 170px;
}
.btn-arrow-5:after{
content:“;
width: 6px;
height: 6px;
border-left: 2px solid;
border-top: 2px solid;
transform: rotate(135deg);
position:absolute;
right:20px;
top: 22px;
transition: all .35s;
}
.btn-arrow-5:hover:after{
width: 10px;
height: 10px;
right:16px;
top: 19px;
}
.btn-arrow-5:hover{
letter-spacing:.5px;
}
.btn-arrow-3 {
background: #e4bc18;
color: #000;
padding: 16px 30px ;
padding-left: 1.2em;
font-weight: 500;
border-radius: 0.9em;
display: flex;
align-items: center;
overflow: hidden;
position: relative;
height: 2.8em;
padding-right: 3.3em;
cursor: pointer;
text-decoration: none;
}
.btn-arrow-3::after {
background: white;
content:’→ ‚;
color: #000;
margin-left: 1em;
position: absolute;
display: flex;
align-items: center;
justify-content: center;
height: 2.2em;
width: 2.2em;
border-radius: 0.7em;
right: 0.3em;
transition: all 0.3s;
}
.btn-arrow-3:hover:after {
width: calc(100% – 0.6em);
}
.btn-arrow-6 {
padding:16px 38px 16px 26px;
background:#fff;
color:#000;
border:2px solid #000;
position:relative;
overflow:hidden;
text-decoration: none;
position:relative;
transition: all 0.5s;
}
.btn-arrow-6:after{
content:“;
width: 0;
height: 0;
border-left: 10px solid #000;
border-top: 10px solid transparent;
border-bottom: 10px solid transparent;
position: absolute;
transition: all .5s;
right: 10px;
top: 15px;
}
.btn-arrow-6:hover:after{
border-left: 25px solid #000;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
right: 70px;
top: 6px;
}
.btn-arrow-6:hover {
color:#fff;
}
Buttons mit Verläufen
.btn-7 {
padding:14px 30px;
font-weight:600;
cursor:pointer;
border-radius: 25px;
display:inline-block;
transition: all .35s ease;
color:#fff;
position:relative;
text-decoration: none;
background: #833AB4;
background-image: linear-gradient(to right,rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
background-size:200%;
}
.btn-7:hover {
background-position: right center;
}
.btn-10 {
padding:14px 32px;
color:#fff;
border:none;
border-radius:999px;
background:linear-gradient(
120deg,
#22c55e 0%,
#16a34a 30%,
#8b5cf6 70%,
#7c3aed 100%
);
background-size:300%;
transition:.4s ease;
text-decoration: none;
}
.btn-10:hover{
background-position:right;
}
.btn-8 {
padding: 14px 32px;
color: #0f172a;
border: 2px solid #ef4444;
border-radius: 12px;
background: #f97316;
position: relative;
overflow: hidden;
transition: color .3s ease;
z-index: 0;
text-decoration: none;
}
.btn-8:before{
content:“;
position: absolute;
inset: 0;
background: linear-gradient(180deg, #f97316, #ef4444);
border-radius: 12px;
transform: translateY(-100%);
transition: transform .45s cubic-bezier(.4,0,.2,1);
z-index: -1;
}
.btn-8:hover{
color: #fff;
}
.btn-8:hover:before{
transform: translateY(0);
}
.btn-11 {
padding:14px 30px;
color:#fff;
border:none;
border-radius:10px;
background:linear-gradient(135deg,#10b981,#6366f1);
box-shadow: inset 0 10px 25px rgba(0,0,0,.1);
transition:.3s ease;
text-decoration: none;
}
.btn-11:hover {
box-shadow: inset 0 18px 40px rgba(0,0,0,.35);
}
.btn-9 {
padding:14px 32px;
color:#111;
border:2px solid #111;
background:#fff;
position:relative;
overflow:hidden;
transition:.3s;
z-index: 0;
text-decoration: none;
background:linear-gradient(180deg,#3b82f6,#06b6d4);
}
.btn-9::before{
content:““;
position:absolute;
inset:0;
background:linear-gradient(90deg,#3b82f6,#06b6d4);
transform:translateX(-100%);
transition:.35s;
z-index:-1;
}
.btn-9:hover::before{
transform:translateX(0);
}
.btn-9:hover{
color:#fff;
border-color:transparent;
}
.btn-12 {
padding:14px 30px;
color:#111;
background:#fff;
border:2px solid transparent;
border-radius:999px;
background-image:
linear-gradient(#fff,#fff),
linear-gradient(90deg,#22c55e,#8b5cf6);
background-origin:border-box;
background-clip:padding-box,border-box;
transition:.3s;
text-decoration: none;
}
.btn-12:hover {
color:#fff;
background-image:
linear-gradient(90deg,#22c55e,#8b5cf6),
linear-gradient(90deg,#22c55e,#8b5cf6);
}
Buttons mit Schatteneffekten
.btn-s-1 {
padding: 18px 46px;
border-radius: 60px;
background: #111;
color: #fff;
font-weight: 600;
display: inline-block;
transition: transform .45s cubic-bezier(.34,1.56,.64,1),
box-shadow .45s;
}
.btn-s-1:hover{
transform: translateY(-4px) scale(1.05);
box-shadow: 0 20px 40px rgba(0,0,0,.25);
}
.btn-s-2 {
padding:14px 32px;
color:#fff;
border:none;
border-radius:8px;
background:linear-gradient(135deg,#22c55e,#14b8a6);
box-shadow:0 10px 25px rgba(20,184,166,.4);
transition:.3s;
text-decoration: none;
}
.btn-s-2:hover {
transform:translateY(-4px);
box-shadow:0 18px 40px rgba(20,184,166,.6);
}
.btn-s-3{
padding: 16px 36px;
border-radius: 14px;
background: #151f45;
font-weight: 600;
transition: transform .6s,
box-shadow .6s;
text-decoration: none;
}
.btn-s-3:hover {
transform: scale(1.12);
box-shadow: 0 25px 60px rgba(0,0,0,.5);
}
Buttons mit aussergewöhnlichen Hover-Effekten
.btn-h-1{
position: relative;
padding: 16px 40px;
border: 2px solid #111;
border-radius: 0px;
color: #111;
text-decoration: none;
overflow: hidden;
transition: .4s ease;
}
.btn-h-1:before{
content: ‚Hier klicken‘;
display:flex;
align-items: center;
position: absolute;
left: -10%;
top: 100%;
width: 120%;
height: 120%;
justify-content: center;
background: #111;
border-radius: 50%;
transition: all .6s ease;
z-index:0;
}
.btn-h-1:hover{
border-radius: 50%;
color: #fff;
}
.btn-h-1:hover:before{
top: -10%;
}
.btn-h-4 {
background-color: rgba(255,255,255,1);
position: relative;
padding: 16px 42px;
color: #111;
text-decoration: none;
transition: all .35s;
}
.btn-h-4:after,
.btn-h-4:before{
content: “;
position: absolute;
width: 0;
height: 2px;
background: #111;
transition: .4s ease;
}
.btn-h-4:before{
left: 0;
bottom: 0;
}
.btn-h-4:after{
right: 0;
top: 0;
}
.btn-h-4:hover:after,
.btn-h-4:hover:before{
width: 100%;
}
.btn-h-4:hover{
background-color: rgba(255,255,255,0.1);
}
.btn-h-2 {
position: relative;
background: #000;
color: #fff;
padding: 16px 42px;
border: none;
font-weight: 600;
cursor: pointer;
overflow: hidden;
}
.btn-h-2:after,
.btn-h-2:before{
content: attr(data-text);
position: absolute;
left: 0;
width: 100%;
text-align: center;
opacity: 0;
}
.btn-h-2:hover:before{
animation: glitch 0.4s infinite;
opacity: 1;
color: #ff0080;
}
.btn-h-2:hover:after{
animation: glitch 0.4s infinite reverse;
opacity: 1;
color: #00fff0;
}
@keyframes glitch {
0% { transform: translate(0); }
20% { transform: translate(-2px, 2px); }
40% { transform: translate(-2px, -2px); }
60% { transform: translate(2px, 2px); }
80% { transform: translate(2px, -2px); }
100% { transform: translate(0); }
}
.btn-h-5 {
padding: 18px 46px;
border-radius: 50px;
background: #111;
color: #fff;
display: inline-block;
animation: float 2s ease-in-out infinite;
}
.btn-h-5:hover {
animation: none;
}
@keyframes float{
0%,100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
.btn-h-3 {
display: inline-block;
color:#fff;
padding: 18px 44px;
background: #650f0f;
border-radius: 60px;
transition: transform .2s ease;
font-weight: 600;
}
.btn-h-3:hover{
animation: toggle 1s infinite reverse;
}
@keyframes toggle{
0% { transform: rotate(-5deg); }
20% { transform: rotate(5deg); }
40% { transform: rotate(-5deg); }
60% { transform: rotate(5deg);}
75% { transform: rotate(-5deg); }
90% { transform: rotate(5deg); }
}
.btn-h-6 {
position: relative;
padding: 18px 44px;
background: #000;
color: #fff;
overflow: hidden;
text-decoration: none;
}
.btn-h-6:before{
content: “;
position: absolute;
top: 0;
left: -60%;
width: 40%;
height: 100%;
background: linear-gradient(
120deg,
transparent,
rgba(255,255,255,.4),
transparent
);
animation: shine 2.5s infinite;
}
.btn-h-6:hover{
background: rgba(120,12,120,.4);
}
@keyframes shine{
0% { left: -60%; }
100% { left: 120%; }
}
Keine Lust auf CSS-Frust?
Ich übernehme das „Pixel-Perfecting“ für dich.
Ich sorge dafür, dass deine Buttons, Formulare und Interaktionen exakt deiner CI folgen. Von der perfekten Rundung deiner Call-to-Actions bis hin zur exakten Markenfarbe – ich schaffe einen maximalen Wiedererkennungswert, der Vertrauen bei deinen Kunden weckt.
