Button CSS Generator

What Is the Button CSS Generator?

This tool builds a complete, ready-to-use button style block -- background color, text color, padding, border-radius, and a hover-state background transition -- with a live preview button you can click-test the hover effect on.

How to Use This Tool

Choose background, text, and hover-background colors, plus padding and border-radius. The preview button and generated CSS update instantly.

Practical Uses

• Quickly generating a starting-point button style for a new project
• Prototyping different color and sizing combinations before finalizing a design
• Learning how a hover-state transition is structured in CSS

For other CSS visual generators, see the CSS Gradient Generator or Box Shadow Generator to add further depth to your button.

What Ends Up in the Output

The tool produces two rules. The first is .btn with your background color, text color, padding, border radius, plus fixed lines: border: none; cursor: pointer; and transition: background-color 0.2s ease; The second is .btn:hover with your hover background color. The starting values are a blue background (#1565C0), white text, a darker blue hover (#0D47A1), padding of 12 pixels vertically and 24 pixels horizontally, and an 8 pixel radius. Padding is written vertical first, then horizontal, as padding: 12px 24px; Note that the two padding fields are labelled X and Y in the tool but appear in the CSS in the opposite order, which is simply how the shorthand works.

Worked Example: A Pill-Shaped Secondary Button

Suppose a hypothetical design system needs a secondary button that is calm rather than loud. Choose a light background such as a pale gray, a dark text color, a slightly darker gray for hover, padding of 10 vertical and 20 horizontal, and a border radius of 999 so it becomes a pill. Copy the CSS and, if this is your only button style, keep the class name .btn. If you have several variants, rename the class in the output, for instance .btn-secondary, and keep the fixed base rules in a shared class.

Checking Colors Before You Copy

• Text contrast against the background is the first thing to verify. Pale text on a mid-tone background is a very common mistake and makes labels hard to read.
• Make the hover color different enough to be noticeable but close enough to look like the same button. A small shift in lightness works well.
• The tool does not create a focus style. Keyboard users need a visible focus indicator, so add a :focus-visible rule with an outline or ring in your own CSS.
• There is also no disabled state in the output. Add a rule for disabled buttons with reduced opacity and a not-allowed cursor if your interface needs it.

Applying It Correctly

Add class="btn" to a button or an anchor element. For links styled as buttons, remember that anchors have underlines and inline display by default, so you may need text-decoration: none and display: inline-block. The generated border: none also removes any default border of a button element. If your design needs an outline button, edit the border line and set the background to transparent.

Touch Targets and Sizing

Padding sets how large the clickable area is. Very small values make buttons hard to tap on a phone, so leave enough vertical and horizontal padding for a comfortable target. Confirm the total height with your font size, since a button's height is text height plus twice the vertical padding.

Limits

The tool provides one hover transition on the background color only. It does not generate a pressed state, a shadow, a gradient background or icon spacing. Combine it with other generators for those extras.

Frequently Asked Questions