LocalToolsOffline browser tools collection

Category: Developer tools

CSS Button Generator

System ideaMissing a tool?

Build customizable CSS buttons with live preview and copy-ready code

Design a button visually and copy clean HTML and CSS. Adjust colours, border, radius, spacing, shadow, hover and focus styles in your browser.

Hover and focus

Preview

Hover the preview, or press Tab to reach it, to see the hover and focus styles.

HTML
<button class="button" type="button">Get started</button>
CSS
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  box-sizing: border-box;
  padding: 10px 18px;
  border: 1px solid #2f6f4f;
  border-radius: 6px;
  background: #2f6f4f;
  color: #ffffff;
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  box-shadow: 0 1px 2px rgb(0 0 0 / 0.12);
  transition: background-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}

.button:hover {
  background: #255a40;
  transform: translateY(-1px);
  box-shadow: 0 3px 8px rgb(0 0 0 / 0.16);
}

.button:active {
  transform: translateY(0);
}

/* Keyboard focus stays visible — never replace this with outline: none */
.button:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

.button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .button {
    transition: none;
  }
  .button:hover {
    transform: none;
  }
}

The snippet uses a real <button> and keeps a visible :focus-visible outline. Removing that outline would leave keyboard users with no way to see where they are.

The preview and the generated code are both built in your browser.

Everything on this page is processed in your browser. Nothing is uploaded.

What this tool does

This is a visual editor for one button: colours, border, radius, padding, type size and weight, shadow, and what changes on hover. The preview is styled by the same CSS you copy, so hovering it or tabbing to it shows the real states rather than an approximation. Two things are not left to chance. The markup is a real `<button type="button">`, not a styled div, so it is focusable and operable by keyboard for free. And the output always keeps a visible `:focus-visible` outline — the single most common accessibility bug in generated button CSS is an `outline: none` that leaves keyboard users with no idea where they are on the page.

How to use it

  1. Set the label and class name, then choose the background, text and border colours.
  2. Adjust radius, border width, padding, font size and weight until the preview looks right.
  3. Set the hover background and focus ring, then copy the HTML and CSS.

Privacy

This tool runs entirely in your browser. Your input is never uploaded, stored or shared — closing the tab removes it.

Frequently asked questions

Can I create hover styles?
Yes. The hover background, the optional lift and the shadow change are all part of the generated CSS, as a separate :hover rule you can edit afterwards.
Does the button need JavaScript?
No. The output is plain HTML and CSS. You only need script for what the button does when it is pressed.
Can I copy the HTML and CSS separately?
Yes — each has its own copy button, so you can drop the CSS into a stylesheet and the markup wherever it belongs.
Why does the CSS include a focus outline?
Because without it, anyone navigating by keyboard cannot see which control they are on. The generated rule uses :focus-visible, so the ring appears for keyboard focus without showing on every mouse click.
Is the generated code local?
Yes. Every setting, the preview and the generated snippets stay in your browser.

Back to all tools