CSS

Button Generator

Adjust the controls to style your button. Copy the HTML and CSS when it looks right.

HTML 
<button class="my-button">Click me</button>
CSS 
.my-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 6px;
  background-color: #3B82F6;
  color: #ffffff;
  border: 2px solid #3B82F6;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.my-button:hover {
  background-color: #2563EB;
}

Related Tools

What is the CSS Button Generator?

This free tool generates the HTML and CSS for a styled button based on your choices. It outputs a <button> element and a matching CSS rule — no JavaScript, no frameworks, no dependencies. Copy both and paste them directly into any project.

How to use it

Type your button label, then adjust font size, padding, border radius, and colors. The preview updates live with every change. When the button looks right, click Copy HTML for the markup and Copy CSS for the styles, then paste both into your project.

Example

.my-button {
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 6px;
  background-color: #3B82F6;
  color: #ffffff;
  border: 2px solid #3B82F6;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.my-button:hover {
  background-color: #2563EB;
}

Tips and best practices

  • Generous horizontal padding (24–32px) makes buttons feel substantial and easier to tap on mobile — padding matters more than font size.
  • Keep border-radius consistent with your cards and inputs. 4–8px suits most UI styles; 50px creates the pill shape common in modern SaaS products.
  • The hover background should be a darker shade of the base color — a completely different hue surprises users and signals something unintended.

Common mistakes

  • Too little padding — a cramped button gets fewer clicks. When in doubt, add more horizontal space.
  • Poor text-to-background contrast — aim for a 4.5:1 ratio (WCAG AA). Light grey text on white almost never passes.
  • No visible focus style — keyboard users and screen-reader users need a clear focus ring to know where they are on the page.

Frequently asked questions

Should I use <button> or <a>?
Use <button> for actions (submit, toggle, copy) and <a> for navigation that changes the URL.

How do I make a ghost (outline) button?
Set background-color: transparent, keep the border, and match the text color to the border color.

Can I add an icon next to the label?
Yes — the generated CSS uses display: inline-flex, so add an <svg> inside the button and set gap on the button for spacing.

For the finishing touches, the Box Shadow Generator adds lift and depth, and the Gradient Generator builds a matching page background. Use the Flexbox Generator to lay out a row of buttons.

← Back to CSS Tools