HTML <button> Tag

Definition and Usage

<button> Tag defines clickable buttons.

in <button> Inside the element, you can place text (and tags like <i>, <b>, <strong>, <br>, <img>, etc.). This is used <input> What buttons created by elements cannot do!

Tip:Always specify for <button> Element specification type attributeto inform the browser what type of button it is.

Tip:You can easily add styles to buttons with CSS! Please see the examples below or visit our CSS Button Tutorial.

Detailed Description

<button> Control with <input type="button"> , it provides more powerful functions and richer content.<button> Compared to </button> All content between the tags is the content of the button, including any acceptable text content, such as text or multimedia content. For example, we can include an image and related text in the button to create an attractive mark image in the button.

The only forbidden element is the image map, as sensitive actions to the mouse and keyboard can interfere with the behavior of form buttons.

Always specify for the button type attribute. The default type of Internet Explorer is "button"while the default value in other browsers (including the W3C specification) is "submit".

See also:

HTML DOM Reference Manual:Button Object

CSS Tutorial:Set button style

Example

Mark clickable buttons like this:

<button type="button">Click me!</button>

Try It Yourself

Tip:More examples are provided at the bottom of the page.

Attribute

Attribute Value Description
autofocus autofocus Specifies that the button should automatically receive focus when the page is loaded.
disabled disabled Specifies that the button should be disabled.
form form_id Specifies which form the button belongs to.
formaction URL

Specifies where the form data should be sent when the form is submitted.

Only applicable when type="submit".
formenctype
  • application/x-www-form-urlencoded
  • multipart/form-data
  • text/plain

Specifies how form data should be encoded before being sent to the server.

Only applicable when type="submit".
formmethod
  • get
  • post

Specifies how form data should be sent (which HTTP method to use).

Only applicable when type="submit".
formnovalidate formnovalidate

Specifies that form data should not be validated when submitted.

Only applicable when type="submit".
formtarget
  • Frame name

Specifies where the response should be displayed after the form is submitted.

Only applicable when type="submit".
name Name Specifies the name of the button.
popovertarget element_id Specifies the popup window element to be called.
popovertargetaction
  • hide
  • show
  • toggle
 Specifies the operation on popup elements when the button is clicked.
type
  • button
  • reset
  • submit
 Specifies the type of the button.
value Text Specifies the initial value of the button.

Global Attributes

<button> Tags also support Global Attributes in HTML.

Event Attributes

<button> Tags also support Event Attributes in HTML.

Default CSS Settings

None.

More Examples

Example 2

Set button styles using CSS:

<!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

Example 2

Set button styles using CSS (with hover effects):

<!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

Browser Support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support