HTML Button Generator
Generate semantic button markup with type, disabled state and aria-label. Live preview and copyable HTML.
Semantic button markup with type and state attributes.
Live preview
<button type="submit">Submit</button>About the html button generator
A button inside a form defaults to type="submit", which is why an unmarked button often submits the form unexpectedly. Setting the type explicitly avoids a whole class of bug.
Use a button for actions and an anchor for navigation. Swapping them breaks keyboard behaviour, right-click, and open-in-new-tab.
How to use it
- 1Write the label.
- 2Set the type: button, submit or reset.
- 3Add an aria-label if the visible text is not descriptive on its own.
- 4Copy the HTML.
Questions
Why does my button submit the form?
Buttons inside a form default to type="submit". Set type="button" for anything that is not submitting.
Button or link?
Button for an action that changes something. Link for navigation to another URL. The distinction matters for keyboard and screen reader users.
When do I need aria-label?
When the visible content is not descriptive, such as an icon-only button. The aria-label supplies the name screen readers announce.