The <button> element
The <button> tag creates a clickable button. Its type attribute controls what it does inside a form: submit (the default — sends the form), reset (clears the form), or button (does nothing on its own, meant to be wired up with JavaScript).
Last updated: October 3, 2026
Quick facts
| Category | Flow content, phrasing content, interactive content, palpable content |
| Content model | Phrasing content, but no interactive descendants (no nested links or other buttons) |
| Tag omission | Neither the start nor end tag can be omitted |
| Permitted parents | Any element that accepts phrasing content |
| DOM interface | HTMLButtonElement |
Syntax
Live example
Edit the code below and watch the preview update instantly.
Attributes
| Attribute | Description |
|---|---|
| type | submit (default in a form), reset, or button |
| disabled | Greys out the button and blocks clicks |
| name / value | Included in the form submission when this button triggers it |
| form | Associates the button with a <form> elsewhere in the document by its id |
Common examples
A submit button in a form
Inside a form, type="submit" sends the form when clicked or when Enter is pressed in a field.
A button that runs JavaScript
Use type="button" so it never submits a form by accident.
An icon button with an accessible name
If a button shows only an icon, give it a text name with aria-label.
<button> vs <input type=”submit”>
Both create a button that can submit a form, but <button> is more flexible. Its label is the content between the tags, so it can include icons, images, bold text or other HTML. An <input type="submit"> is a void element whose label is just plain text in its value attribute.
For new pages, <button> is the better default: it is easier to style, can hold an icon, and works outside forms with type="button". The input version still works perfectly well and you will see it in older code and simple forms.
| <button> | <input type=”submit”> | |
|---|---|---|
| Label | Any HTML between tags | Plain text in value |
| Icons inside | Yes | No |
| Recommended for new code | Yes | Fine, but less flexible |
Common mistakes to avoid
- Forgetting the type inside a form. A button in a form defaults to
type="submit", so a “Cancel” or menu button reloads the page unless you addtype="button". - Using a div or span as a button. It won’t work with the keyboard and screen readers won’t announce it as a button.
- Icon-only buttons with no name. A screen reader would just say “button”. Add
aria-labelor visually hidden text. - Removing the focus outline.
outline: noneleaves keyboard users lost. Restyle the focus state instead of deleting it.
Accessibility & SEO tips
- Use a link when the click goes to another page, and a button when it does something on the current page.
- Make buttons at least about 44×44 pixels on touch screens and keep good color contrast for the text.
- Button text should say what happens: “Download PDF” is clearer than “Submit” or “OK”.
- Avoid using only color to show a button’s state, such as red for “danger”; add a clear word or icon too, so color-blind visitors understand it.
Browser support
Supported in every browser, including Chrome, Edge, Firefox, Safari and their mobile versions — it has been part of HTML since the very first versions.
Tutorials: How to add a link, How to make a button, How to make a contact form, How to make a dropdown menu, How to make a navigation bar, HTML forms tutorial