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
<button>Click Me</button>Live preview
Styling HTML Buttons
Example
<button class="mytestbtn">Green Button</button>Live preview
Disabled Buttons
Use the disabled attribute to make a button unclickable:
Example
<button disabled>Disabled Button</button>Live preview
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:
Example
<button onclick="alert('Hello!')">Click Me</button>Live preview
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 form
- type="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>Live preview
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.