Premium Buttons - CSS Component Library

Primary Button

<button class="btn btn-primary">
    <span>Click Me</span>
    <i class="fas fa-arrow-right"></i>
</button>

.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

Gradient Button

<button class="btn btn-gradient">
    <span>Gradient Magic</span>
    <div class="btn-glow"></div>
</button>

.btn-gradient {
    background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    color: white;
    position: relative;
    overflow: hidden;
}

.btn-glow {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.5s ease;
}

.btn-gradient:hover .btn-glow {
    left: 100%;
}

Neon Button

<button class="btn btn-neon">
    <span>Neon Effect</span>
    <div class="neon-border"></div>
</button>

Glass Button

<button class="btn btn-glass">
    <span>Glassmorphism</span>
    <div class="glass-shine"></div>
</button>

3D Button

<button class="btn btn-3d">
    <span>3D Transform</span>
    <div class="btn-depth"></div>
</button>

Holographic Button

<button class="btn btn-holographic">
    <span>Holographic</span>
    <div class="holo-overlay"></div>
</button>

Morphing Button

<button class="btn btn-morph">
    <span>Morphing Shape</span>
    <div class="morph-bg"></div>
</button>

Loading Button

<button class="btn btn-loading">
    <span class="btn-text">Click to Load</span>
    <span class="btn-loader">
        <div class="loading"></div>
    </span>
</button>

Particle Button

<button class="btn btn-particle">
    <span>Particle Effect</span>
    <div class="particles">
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
        <div class="particle"></div>
    </div>
</button>

Magnetic Button

<button class="btn btn-magnetic magnetic-hover">
    <span>Magnetic Pull</span>
    <div class="magnetic-field"></div>
</button>

Ripple Button

<button class="btn btn-ripple">
    <span>Ripple Wave</span>
    <div class="ripple-effect"></div>
</button>

Ghost Button

<button class="btn btn-ghost">
    <span>Ghost Style</span>
    <div class="ghost-bg"></div>
</button>