HTML Buttons
Buttons let users interact with a web page. They can submit forms, run JavaScript, or trigger different actions when clicked.
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.
Example
Example Code
htmlStyling HTML Buttons
Buttons are often styled with CSS:
Example
Example Code
htmlDisabled Buttons
Use the disabled attribute to make a button unclickable:
Example
Example Code
htmlTip: 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:
Example
Example Code
htmlNote: 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 form
type="reset"- Resets all form fields
Example
Example Code
htmlButtons 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
Example Code
htmlNote: 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.
Interactive Code Examples
HTML Example 1
htmlHTML Example 2
htmlHTML Example 3
htmlHTML Example 4
htmlExample 5
html<button type="button">Normal Button</button>
<button type="submit">Submit</button>
<button type="reset">Reset</button>