HTML Button Generator

Configure a native HTML button, style it and copy the HTML and CSS.

Presets:

Primary
Pill
Dark
Submit

Border radius

6px

Horizontal padding

20px

Vertical padding

10px

Font size

16px

HTML
<button type="button" class="btn">Click me</button>
CSS
.btn {
  background: #d10505;
  color: #ffffff;
  border: none;
  border-radius: 6px;
  padding: 10px 20px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
}

.btn:hover {
  filter: brightness(0.9);
}

.btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

HTML Button Generator

The <button> element is the native, accessible way to let visitors trigger an action: submit a form, open a menu, play a video or add a product to a cart. It is keyboard-focusable out of the box, responds to Enter and Space, and is announced as a button by screen readers. The HTML Button Generator writes clean <button> markup for you and, if you want, a matching CSS rule so the button looks finished right away.

What you can configure

  • type – button, submit or reset. Forgetting the type is a classic bug: a plain button inside a form submits it.
  • id, class, name and value – identify the button for CSS, JavaScript and form processing. The name/value pair is sent with the form when that button submits it.
  • title – a tooltip on hover.
  • onclick – an optional inline JavaScript handler for quick prototypes.
  • disabled and autofocus – boolean attributes written without a value, as HTML expects.

Styling

Turn on Generate CSS to get a rule for the first class name with background and text colour, border radius, padding and font size, plus :hover and :disabled states. The presets give you a primary, pill, dark and submit look in one click, and the live preview renders the exact code in an isolated frame.

Accessibility tips

Keep the visible text short and descriptive ("Save changes" rather than "OK"). If the button only contains an icon, add an aria-label. Make sure the text colour has enough contrast against the background (WCAG asks for at least 4.5:1). To add depth, use the CSS Box Shadow Generator. For more elaborate gradients and shadows, try the CSS Button Generator, and to build a whole form visually use the Form Builder.

Frequently Asked Questions

A submit button sends its form, a reset button restores every form field to its initial value, and type="button" does nothing by default so you can attach JavaScript. Inside a form the default type is submit, so always set the type explicitly.

Use a link (an a element) when the click navigates to another URL. Use a button when it performs an action on the current page such as submitting, opening a dialog or toggling a menu. Screen readers announce the two differently.

Add the disabled attribute. The button cannot be focused or clicked and is skipped by forms. The generated CSS includes a :disabled rule that lowers its opacity and shows a not-allowed cursor.

Yes. The button element can contain phrasing content such as an inline SVG or an img with alt text. Paste the generated code and replace the text with your icon plus a short label.