HTML Button Code
This page contains HTML button code — code for creating a button on an HTML document.
To create an HTML button, you need to use the HTML <button>
tag. The button can be nested inside a <form>
element or it can stand alone.
Basic Button Example
Here's an example of an HTML button:
Source Code | Result |
---|---|
The above button consists of a start and an end tag. Enclosed between these tags is the contents of the button. In this case it's the text "My Button".
Basic Syles
Let's dress it up a bit:
Source Code | Result |
---|---|
The above example uses CSS to provide some basic styling for the button.
Submit & Reset Buttons
A button can be used to submit the contents of a form. To do this, use type="submit"
.
To make the button a "reset" button (i.e. it resets the contents of the form that it is associated with), use type="reset"
.
Here is an example of a form with both a "submit" and a "reset" button.
Source Code | Result |
---|---|
A Note on Usability
Think carefully before implementing a "reset" button. Users can accidentally click this button when they meant to click the "submit" button. This can be incredibly frustrating, especially on a long form where the user has just spent a considerable amount of time entering the details — only for it to be wiped away with a single click!
If you do decide to implement a "reset" button, be sure to position it in a place where it is less likely to be confused with the "submit" button. Also consider styling it in such a way to reduce the likelihood of accidental clicks. Also consider styling the "submit" button in a way that makes it stand out as the obvious button to click.
Menu Button
Here's an example that uses the <menu>
element:
Source Code | Result |
---|---|
Disabling a Button
You can disable a button by using the disabled
attribute. You could use this in conjunction with a script to enable/disable the button depending on whether certain criteria has been met.
Here's an example of disabling the "Reset" button:
Source Code | Result |
---|---|