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

Text Transform

Letter Spacing (px)

Border Width (px)

Border Style

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!

toolry.online

CSS Button Generator