BYTETOOLS

CSS Button Generator

Design CSS buttons with background, text color, padding, radius, font size, border, shadow and a hover color. Live preview and copy-ready CSS including :hover.

Button settings

24
12
8
16

CSS

.btn {
  background-color: #6d28d9;
  color: #ffffff;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: background-color 200ms ease;
}

.btn:hover {
  background-color: #5b21b6;
}

What is the CSS Button Generator?

The CSS Button Generator lets you style a button visually and copy the complete CSS, including the :hover state.

  • Background, text and hover color controls
  • Padding, radius, font-size, border and shadow
  • Live hover-testable preview
  • Outputs the full rule plus a :hover rule
  • Clean, class-based CSS you can rename
  • 100% client-side and free

How to use the CSS Button Generator

  1. 1

    Set the background and text colors, and a hover background color.

  2. 2

    Adjust padding, corner radius and font size.

  3. 3

    Add a border and box shadow if you want them.

  4. 4

    Hover the preview to test, then copy the button CSS including :hover.

About the CSS Button Generator

The CSS Button Generator lets you style a button visually and copy the complete CSS, including the :hover state. Control background and text color, padding, corner radius, font size, border and box shadow, and set a separate hover background so the button reacts to the cursor.

It is a fast way to prototype call-to-action buttons that match your brand without writing CSS from scratch. Hover the live preview to confirm the interaction before copying the code.

All styling and code generation happen locally in your browser — free, private and offline-capable.

Frequently asked questions

How do I add a hover effect to a CSS button?

Define a :hover rule for the button selector that changes properties like background-color, and add a transition so the change animates. This tool outputs both the base rule and a matching .btn:hover rule automatically.

What padding should a button have?

A comfortable button usually has more horizontal than vertical padding, for example 12px 24px. Ensure the total tap target is at least 44px tall on touch devices for accessibility.

How do I make a button look clickable?

Use cursor: pointer, a clear hover state, adequate padding and a subtle shadow or border. Rounded corners and a color that contrasts with the page also signal interactivity.

Should button corners be rounded or square?

It is a stylistic choice. Slightly rounded corners (4–8px) feel modern and friendly, fully rounded pills suit playful brands, and square corners read as more formal or technical. This tool supports the full range.

How do I make an accessible button?

Use a real button element, ensure text contrast meets WCAG AA (4.5:1), provide a visible focus outline, and keep the tap target large enough. The generated CSS pairs well with a semantic button element.

Guides for CSS Button Generator

Related tools