HTML Buttons
Buttons let users interact with a web page. They can submit forms, run JavaScript, or trigger different actions when clicked.
HTML Button
The HTML <button> element defines a clickable button.
By itself, the button does nothing until you add an action to it.
Styling HTML Buttons
Buttons are often styled with CSS:
Disabled Buttons
Use the disabled attribute to make a button unclickable:
Tip: Disabled buttons cannot be clicked and usually appear faded.
Button with JavaScript
You can run JavaScript when the user clicks a button using the onclick attribute:
Note: You will learn more about JavaScript in our HTML JavaScript chapter.
Button Types
The type attribute defines what a button does when clicked. There are three button types:
type="button"- A normal clickable button (does nothing by default)type="submit"- Submits a formtype="reset"- Resets all form fields
<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>
Buttons are often used inside forms, which you will learn more about in a later chapter.
For now, just know that a submit button sends the form data to the server, while a reset button clears the form:
Example
<form action="/action_page.html">
First name: <input type="text" name="fname">
<button type="submit">Submit</button>
<button type="reset">Reset Form</button>
</form>
Try it Yourself »
Note: You should always specify the type attribute. Inside a form, the default type is submit, and browsers may behave differently if the type is omitted.
HTML Button Reference
| Tag | Description |
|---|---|
| <button> | Defines a clickable button |
Tip: For a complete list of all HTML tags, visit our HTML Tag Reference.
❓ FAQ (Questions and answers about the lesson)
Why are buttons needed on a web page?
Buttons allow users to interact with a web page. They can submit forms, run JavaScript, or trigger various actions when clicked.
Which HTML element on a web page defines a clickable button?
The HTML <button> element defines a button that can be clicked. A button by itself does nothing until you add an action to it.
What is used to style buttons on a web page?
Buttons on a web page are most often styled using CSS.
What attribute is used to make a button on a web page non-clickable?
To make a button unclickable, use the disabled attribute. Disabled buttons cannot be clicked and usually appear dimmed.
What attribute is used to run JavaScript when the user clicks a button?
To run JavaScript when the user clicks a button, the onclick attribute is used.
What types of buttons are there on a web page?
There are three types of buttons:
- type="button" - A regular button that can be clicked (does nothing by default)
- type="submit" - Submits the form
- type="reset" - Resets all form fields
What are buttons on a web page most often used for?
Most often, buttons on a web page are used inside forms:
- The submit button sends the form data to the server;
- The reset button clears the form.
Which English-language website is the best for learning HTML online?
The best site to learn HTML is the site W3SchoolsEn. The Best.
📚 Additional resources for in-depth study
For those who want to know absolutely everything about the <button> tag, we recommend referring to the primary sources and official documentation:
- MDN Web Docs: <button> — The most complete practical guide for developers with examples and a browser support table.
- WHATWG: HTML Living Standard - <button> — official technical specification, which describes the internal logic of the buttons.
- W3C: Accessibility Guidelines (WAI-ARIA) are standards for creating buttons that can be used by everyone, including people with visual impairments.
