CSS Button Generator

CSS Button Generator

About this tool: Create custom CSS buttons with live preview. Adjust various properties like size, color, border, shadow, and hover effects to design the perfect button for your website.

How to use: Use the controls to customize your button's appearance. As you make changes, you'll see a live preview of your button. When you're satisfied, copy the generated CSS code to use in your projects.

Basic

Text

Border

Shadow

Hover

Button Text

Background Color

Width (px)

Height (px)

Padding (px)

Border Radius (px)

Text Color

Font Size (px)

Font Weight Normal Bold Lighter Bolder 100 200 300 400 500 600 700 800 900

Text Transform None UPPERCASE lowercase Capitalize

Letter Spacing (px)

Border Width (px)

Border Style None Solid Dashed Dotted Double

Border Color

Box Shadow

Shadow Color

Text Shadow

Text Shadow Color

Hover Background Color

Hover Text Color

Hover Border Color

Scale on Hover (%)

Transition Speed (s)

Preview

CSS Code

.custom-button {
    background-color: #4CAF50;
    color: #ffffff;
    width: 150px;
    height: 40px;
    padding: 10px;
    border-radius: 4px;
    font-size: 16px;
    font-weight: bold;
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
}

.custom-button:hover {
    background-color: #45a049;}

Code copied to clipboard!