10 Moderne CSS Buttons » Copy-Paste Styles (Glassmorphism, Neon)

Ein Button ist nie nur ein Rechteck mit Text. Er ist das primäre Interaktionselement, der "Call to Action", der Moment der Entscheidung.

Hier sind 10 moderne (und retro-moderne) Button-Styles, die du direkt in dein Projekt kopieren kannst.

01. DIE STYLES

1. FLAT BUTTON (ARCHITECTURAL)

Keine Radien, keine Verläufe. Purer, struktureller Minimalismus.

.btn-flat {
    background: #222;
    color: #fff;
    border: none;
    padding: 14px 32px;
    font-size: 15px;
    font-weight: 500;
    border-radius: 0px; /* Sharp Edges */
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.btn-flat:hover {
    background: #000;
    letter-spacing: 1px; /* Subtle Expansion */
}

2. GLASSMORPHISM (FROSTED)

Wirkt am besten auf tiefen, komplexen Hintergründen. Hier mit einem Deep-Mesh Gradient.

.btn-glass {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 14px 32px;
    border-radius: 100px;
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-glass:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
    transform: translateY(-1px);
}

3. SOFT SHADOW (LEVITATING)

Extremes Soft-UI. Der Button scheint zu schweben. Edel und rein.

.btn-soft {
    background: #fff;
    color: #555;
    border: none;
    padding: 16px 36px;
    border-radius: 20px;
    box-shadow: 0 10px 30px -10px rgba(0,0,0,0.1);
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    font-size: 16px;
    font-weight: 600;
    letter-spacing: -0.5px;
}
.btn-soft:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.15);
    color: #000;
}

4. GHOST BUTTON (LUXE LINE)

Goldener Schnitt. Dünne Linien und Serif-Fonts für maximale Eleganz.

.btn-ghost {
    background: transparent;
    color: #C5A059; /* Muted Gold */
    border: 1px solid rgba(197, 160, 89, 0.3);
    padding: 14px 32px;
    cursor: pointer;
    transition: all 0.5s ease;
    font-size: 15px;
    border-radius: 0;
    font-family: serif; /* Elegant Touch */
    letter-spacing: 2px;
    position: relative;
    overflow: hidden;
}
.btn-ghost::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background: #C5A059;
    z-index: -1;
    transform: scaleX(0);
    transform-origin: right;
    transition: transform 0.5s cubic-bezier(0.8, 0, 0.2, 1);
}
.btn-ghost:hover {
    color: #fff;
    border-color: #C5A059;
}
.btn-ghost:hover::before {
    transform: scaleX(1);
    transform-origin: left;
}

5. GRADIENT GLOW (AI AURA)

Ein pulsierender, magischer Glow, der immer präsent ist. High-End Tech Vibe.

.btn-glow {
    background: #000;
    color: #fff;
    border: 1px solid transparent;
    padding: 14px 34px;
    border-radius: 100px;
    cursor: pointer;
    position: relative;
    z-index: 1;
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    transition: all 0.5s ease;
    /* Gradient Border Trick */
    background-image: linear-gradient(#000, #000), 
                      linear-gradient(90deg, #333, #666, #333);
    background-origin: border-box;
    background-clip: padding-box, border-box;
    box-shadow: 0 0 10px rgba(255,255,255,0.05);
}
.btn-glow::before {
    content: "";
    position: absolute;
    top: -1px; left: -1px; right: -1px; bottom: -1px;
    z-index: -1;
    background: linear-gradient(45deg, #FF0080, #7928CA, #FF0080);
    border-radius: 100px;
    background-size: 200%;
    filter: blur(12px);
    opacity: 0.4;
    transition: opacity 0.5s ease;
    animation: aura 3s linear infinite;
}
.btn-glow:hover::before {
    opacity: 0.8;
    filter: blur(16px);
}
.btn-glow:hover {
    transform: scale(1.02);
    box-shadow: 0 0 20px rgba(121, 40, 202, 0.4);
    border-color: transparent;
}
@keyframes aura {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

6. RETRO BRUTALIST

Laut, kantig, Nostalgie pur.

.btn-retro {
    background: #f1c40f;
    color: black;
    border: 3px solid black;
    padding: 12px 24px;
    font-weight: bold;
    box-shadow: 5px 5px 0px black;
    cursor: pointer;
    text-transform: uppercase;
    font-size: 16px;
    transition: all 0.1s;
}
.btn-retro:active {
    transform: translate(2px, 2px);
    box-shadow: 2px 2px 0px black;
}

7. FLOATING ACTION BUTTON (MODERN)

Nicht mehr nur ein roter Kreis. Modern, mit Squircle-Radius und subtiler Animation.

.btn-fab {
    background: #fff;
    color: #000;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    border: 1px solid #eee;
    font-size: 24px;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(0,0,0,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-fab:hover {
    transform: rotate(90deg);
    box-shadow: 0 8px 15px rgba(0,0,0,0.1);
    border-color: #000;
}

8. MICRO-INTERACTION

Zeigt erst bei Interaktion mehr Details. Elegant und platzsparend.

.btn-micro {
    background: #000;
    color: white;
    border: none;
    padding: 12px 24px;
    cursor: pointer;
    border-radius: 50px;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: all 0.3s ease;
}
.btn-micro::after {
    content: "→";
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    width: 0;
}
.btn-micro:hover {
    padding-right: 20px;
}
.btn-micro:hover::after {
    opacity: 1;
    transform: translateX(0);
    width: auto;
    margin-left: 5px;
}

9. PILL-SHAPED (COSMIC)

Lebendig und energetisch. Ein Gradient der sich bewegt.

.btn-pill {
    background: linear-gradient(90deg, #ec008c, #fc6767, #ec008c);
    background-size: 200% auto;
    color: white;
    border: none;
    padding: 15px 40px;
    border-radius: 50px;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;
    transition: all 0.5s ease;
    box-shadow: 0 5px 15px rgba(236, 0, 140, 0.4);
}
.btn-pill:hover {
    background-position: right center;
    transform: scale(1.05);
}

10. NEU-BRUTALIST GLOSSY

Ein Hybrid aus Retro und Modern Glossy.

.btn-glossy {
    background: linear-gradient(to bottom, #777, #333);
    color: white;
    border: 2px solid #000;
    padding: 12px 24px;
    border-radius: 4px;
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), 4px 4px 0 #000;
    cursor: pointer;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 16px;
}
.btn-glossy:active {
    box-shadow: inset 0 2px 0 rgba(255,255,255,0.3), 2px 2px 0 #000;
    transform: translate(2px, 2px);
}

02. FAZIT

Wähle den Style, der zu deiner Marke passt. Ein "Neon Button" wirkt auf einer Anwaltsseite unseriös, während ein "Minimal Outline" Button auf einer Gaming-Seite untergehen könnte.

ÜBER DEN AUTOR

Ich bin Alex Kiritschenko und verbinde als Senior SEO Consultant fundierte B2B-Expertise mit innovativen KI-Strategien für maximale digitale Sichtbarkeit. Mein Fokus liegt auf der Kombination aus Kreativität und generativer KI, um effektive und skalierbare Ergebnisse zu erzielen.