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!

Precious chimara

Precious Chimara is dedicated to being a digital entrepreneur and creative thinker who helps people and companies develop and enhance their online presence. Having a background in web development, digital marketing, and content strategy, Precious aims to design instruments and develop solutions that motivate growth, increase productivity, and enhance visibility. Over the years, Precious has executed various online systems which are characterized by simplicity, efficiency, and creative ingenuity to deliver the desired results.