HTML <button> Tag

❮ Previous Next ❯

The <button> tag creates a <button> that can be clicked.

Within a <button> element, you can include text and other tags like <i>, <b>, <strong>, <br>, <img>, etc. However, this capability is not available with a button created using the <input> element.

Tip: Make sure to include the type attribute when using a <button> element. This helps browsers understand the kind of button it is.

Tip: Styling buttons using CSS is simple! Check out the examples below or visit our CSS Buttons tutorial at this link.

Attributes

Attribute	Value	Description
autofocus	autofocus	Indicates that a button should receive focus automatically when the webpage is opened.
disabled	disabled	Indicates that a button cannot be used or clicked.
form	form_id	Indicates the specific form to which the button is associated.
formaction	URL	Specifies the destination for sending the form data when a form is submitted. Applicable only when the input type is set to "submit".
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	Describes the method of encoding form data before sending it to a server, specifically for the "submit" type.
formmethod	get post	Describes the way to send the information from a form, indicating which HTTP method to use. This is applicable only when the type is set to "submit."
formnovalidate	formnovalidate	Indicates that the form information doesn't need validation when submitted. This applies specifically to the "submit" type.
formtarget	_blank _self _parent _top framename	Determines the location to show the result after sending the form. Applicable only when the form type is "submit."
popovertarget	element_id	Indicates the popover element to activate.
popovertargetaction	hide show toggle	Describes the action taken on the popover element when the button is pressed.
name	name	Names the button.
type	button reset submit	Defines the button's type.
value	text	Sets the starting value for the button.

<!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: #04AA6D;
      }

      /* Green */
      .button2 {
        background-color: #008CBA;
      }

      /* Blue */
    </style>
  </head>
  <body>
    <h1>The button element - Styled with CSS</h1>
    <p>Modify the button's background color using the background-color property:</p>
    <button class="button button1">Green</button>
    <button class="button button2">Blue</button>
  </body>
</html>

❮ Previous Next ❯

HTML Basics

HTML Tags

HTML Attributes

HTML Graphics

HTML APIs

HTML DOM

HTML Audio/Video

HTML 5 MathML

HTML <button> Tag

Attributes

Web Development