HTML Buttons
HTML Buttons
The HTML <button> element defines a clickable button.
Buttons let users interact with a web page. They can submit forms, run JavaScript, or trigger different actions when clicked.
By itself, the button does not do anything 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.
HTML 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.php">
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.
