HTML Button Generator

Generate copy-ready HTML locally in your browser.

What the <button> element is for

The HTML <button> element creates a clickable control that is focusable, activatable with the keyboard (Enter or Space), and announced to screen readers as a button by default — none of which a styled <div> or <span> gets without extra ARIA work. Inside a <form>, its type attribute controls behavior: submit (the default) submits the form, reset clears it, and button does nothing on its own — it's meant for actions you wire up in JavaScript, like opening a menu, toggling a panel, or running a calculation.

How to use this generator

  1. Type the label or content you want inside the button into the input box — plain text, or HTML if your project needs an icon markup pattern you'll adjust after copying.
  2. Click Generate to produce a <button type="button"> wrapping that text.
  3. Copy the output and paste it into your page, then attach a click handler or change the type attribute to submit if it belongs inside a form.

Example output

<button type="button">Add to cart</button>

Common questions

Why does the generated markup use type="button" instead of leaving the type off?

Inside a form, a button with no type (or type="submit") submits the form on click. type="button" opts out so you can attach your own handler without triggering an accidental submit.

Should I use <button> or <input type="submit">?

<button> can contain other markup — icons, spans, line breaks — while <input> only shows plain text from its value attribute. Both submit a form identically as type="submit".

Is a styled div with onclick good enough?

Not without extra work — it isn't in the tab order and isn't announced as a button unless you add tabindex="0", role="button", and your own keydown handling. <button> provides all of that natively.

How do I disable a button, and what happens?

Add the disabled attribute. It's removed from the tab order, shown dimmed by default, and stops firing click events entirely — even to JavaScript — so a temporary "loading" state is often better handled with aria-busy and a visual style instead.