ExampleA clickable button is marked up as follows: <button type="button">Click Me!</button> Try it Yourself » More "Try it Yourself" examples below.
Definition and UsageThe <button> tag defines a clickable button. Inside a <button> element you can put text (and tags like <i> , <b> ,
<strong> , <br> , <img> , etc.). That is not possible with a button created with the <input> element! Tip: Always specify the type attribute for a <button> element, to tell browsers what type of button it is. Tip: You can easily style buttons with CSS! Look at the examples below or visit our CSS Buttons tutorial.
Browser Support
Element | | | | | |
---|
<button>
| Yes
| Yes
| Yes
| Yes
| Yes
|
Attributes
Attribute | Value | Description |
---|
autofocus
| autofocus
| Specifies that a button should automatically get focus when the page loads
| disabled
| disabled
| Specifies that a button should be disabled
| form
| form_id
| Specifies which form the button belongs to
| formaction
| URL
| Specifies where to send the form-data when a form is submitted. Only for type="submit"
| formenctype
| application/x-www-form-urlencoded multipart/form-data
text/plain
| Specifies how form-data should be encoded before sending it to a server. Only for type="submit"
| formmethod
| get post
| Specifies how to send the form-data (which HTTP method to use). Only for type="submit"
| formnovalidate
| formnovalidate
| Specifies that the form-data should not be validated on submission. Only for type="submit"
| formtarget
| _blank _self _parent _top framename
| Specifies where to display the response after submitting the form. Only for type="submit"
| name
| name
| Specifies a name for the button
| type
| button reset
submit
| Specifies the type of button
| value
| text
| Specifies an initial value for the button
|
Global AttributesThe <button> tag also supports the Global Attributes in HTML.
Event AttributesThe <button> tag also supports the Event Attributes in HTML.
More ExamplesExampleUse CSS to style buttons: <!DOCTYPE html> <html> <head> <style> .button
{ border: none; color: white; padding: 15px 32px; text-align: center; text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; cursor: pointer; } .button1 {background-color: #4CAF50;} /* Green */ .button2 {background-color: #008CBA;} /* Blue */ </style> </head> <body> <button class="button button1">Green</button> <button
class="button button2">Blue</button> </body> </html> Try it Yourself » ExampleUse CSS to style buttons (with hover effect): <!DOCTYPE html> <html> <head> <style> .button { border: none; color: white; padding: 16px 32px; text-align: center;
text-decoration: none; display: inline-block; font-size: 16px; margin: 4px 2px; transition-duration: 0.4s; cursor: pointer; } .button1 { background-color: white; color: black; border: 2px solid #4CAF50; } .button1:hover { background-color: #4CAF50; color: white; } .button2 { background-color: white; color: black; border: 2px solid
#008CBA; } .button2:hover { background-color: #008CBA; color: white; } </style> </head> <body> <button class="button button1">Green</button> <button class="button button2">Blue</button> </body> </html> Try it Yourself »
Related PagesHTML DOM
reference: Button Object CSS Tutorial: Styling Buttons
Default CSS SettingsNone. ❮ HTML <button> tag ExampleTwo button elements that act as one submit button and one reset button (in a form): <form action="/action_page.php" method="get"> <label for="fname">First name:</label> <input type="text" id="fname" name="fname"><br><br> <label
for="lname">Last
name:</label> <input type="text" id="lname" name="lname"><br><br> <button type="submit" value="Submit">Submit</button> <button type="reset" value="Reset">Reset</button> </form> Try it Yourself »
Definition and UsageThe type attribute specifies the type of button. Tip:
Always specify the type attribute for the
<button> element. Different browsers may use different default types for the
<button> element.
Browser Support
Attribute | | | | | |
---|
type
| Yes
| Yes
| Yes
| Yes
| Yes
|
Syntax<button type="button|submit|reset"> Attribute Values
Value | Description |
---|
button
| The button is a clickable button
| submit
| The button is a submit button (submits form-data)
| reset
| The button is a reset button (resets the form-data to its initial values)
|
❮ HTML <button> tag |