Button Design Generator

Basic Styles

Button Text Width (px) Height (px)

Colors

Background Color Text Color Border Color

Borders & Shadows

Border Radius (px) Border Width (px)

Add Shadow

Effects

Hover Effect

Pulse Animation

Add Icon

HTML

CSS

<button class="custom-btn">Click Me</button>

.custom-btn {
    background: #4361ee;
    color: #ffffff;
    border: 1px solid #4361ee;
    border-radius: 8px;
    width: 150px;
    height: 45px;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.3s ease;
}

.custom-btn:hover {
    background: #3a56d4;
}

// No JavaScript required for basic functionality
// For hover effects, include the CSS above