CSS

Button Generator

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

Result

HTML 

<button type="button" class="my-button">Click me</button>
CSS 

.my-button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: system-ui, sans-serif;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 6px;
  background-color: #2563EB;
  color: #ffffff;
  border: 2px solid #2563EB;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.my-button:hover {
  background-color: #1D4ED8;
}
.my-button:focus-visible {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
  .my-button {
    transition: none;
  }
}

Related Tools

Create the HTML and CSS for a button

Enter a short action label, then adjust its text size, padding, corners, and colors. Copy both outputs: the HTML supplies a <button type="button"> element, and the CSS styles its .my-button class.

Use the result in your project

  1. Choose a label that describes the action, such as “Save changes”.
  2. Check the preview at its normal and hover colors, then copy the HTML and CSS into your page and stylesheet.
  3. Connect the button to your application’s action. The generated HTML does not include a click handler.

Use type="submit" when the button should submit a form. For navigation to another page, use an <a href="..."> element and apply the styles to it.

Check every state

  • Check text contrast in both normal and hover states. The Contrast Checker compares your colors with WCAG thresholds.
  • The output includes a :focus-visible outline using the text color. Verify that the outline remains visible against the surrounding page.
  • Test the target size, long or translated labels, and keyboard operation in context. The preview alone does not establish accessibility.
  • The CSS includes a reduced-motion rule for its color transition. Add disabled, loading, and application-specific states where needed.

The generated label is escaped as HTML text. To add an icon, edit the markup and use gap with the existing inline-flex layout. Keep a clear accessible name for the button.

← Back to CSS Tools