CodesBeautify

HTML Button Generator

Generate a button element with the correct type and state attributes, plus optional starter CSS.

HTMLtype="button"
<button type="button" class="btn">Send message</button>
Runs locally in your browser

About the HTML Button Generator

The attribute that causes the most trouble on a button is type. A <button> inside a form defaults to submit, so a button meant to open a menu will reload the page unless you write type="button" explicitly. This generator always writes the type out, which removes that whole class of bug. The other two values are submit, which sends the form, and reset, which restores every field to its initial value and is best avoided because people hit it by accident.

Name and value matter when a form has more than one submit button. The pair is posted only for the button that was actually pressed, so a single form can carry Save, Publish and Delete and the server can tell which was used. The generator also offers disabled, which blocks clicks and removes the button from the tab order, and autofocus, which should appear at most once per page.

Use a real button rather than a styled link or a clickable div. You get keyboard activation with both Enter and Space, focus handling and the correct screen reader role for nothing. Tick the CSS box for a small starter rule set matched to your class name. For gradients, shadows and hover animation, the CSS Button Generator produces the styling to pair with this markup.

How to use

  1. Type the button label.
  2. Pick the type: button for scripts, submit inside a form.
  3. Add a class, id, name or value if your code needs them.
  4. Tick the CSS box for starter styling, then copy.

Common questions

Why does my button submit the form?
Because a button without a type attribute defaults to submit. Set type="button" for anything that only runs JavaScript.
When do I need name and value?
When a form has several submit buttons. Only the pressed button posts its name and value, so the server can tell which action was chosen.
Should I use a div with a click handler instead?
No. A real button is focusable, works with Enter and Space, and is announced correctly by assistive technology without extra attributes.
Can a disabled button still be clicked by script?
A disabled button fires no click events and is skipped by the tab order, so remove the attribute before you expect interaction.