HTML <button> Tag - Plain and Styled Buttons

If you find this helpful, please click the Google Button to the left, if it is white, to make it turn blue or red. Thank you! (It also helps find this page again more easily.)

The <button> Tag in HTML 5

The <button> tag creates a button. It is one of the tags for interactive content in HTML and is often used in an HTML form but can also be used as a standalone element. If it is not disabled, it will be a clickable button, which can send a GET or POST request to a server or perform a client-side action in JavaScript.

Blinking Buttons

Animated Buttons

These are actual working examples of the <button> tag example code below.

<button> Tag Syntax

<body>
   ...
   ... flow content expected ...
   <form id="form-id" method="GET|POST|etc." action="target-URL">
      ...
      ... phrasing content expected ...<button>... phrasing content ...</button>...
      ...
   </form>
   ...
   ... phrasing content expected ...<button form="form-id">... phrasing content ...</button>...
   ...
</body>

Rules for coding HTML button elements

Make sure you understand the difference between a tag and element and are familiar with the definitions of namespace and other HTML terms.

Code the button element where phrasing content is expected, usually inside a form element.
Begin the button element with a starting <button> tag. The element name uses lower case letters and should be in the HTML namespace, which it will pick up automatically from the xmlns attribute on the <html> tag.
If the button is for a form that can be submitted but is outside that form element, include a form attribute referencing the form the button is to be associated with.
Include any other attributes on the <button> tag as appropriate.
Inside the button element, between the starting <button> tag and the ending </button> tag, code the inner HTML phrasing content.
End the button element with a matching </button> closing tag.

Content Model

Contents of the button element

The content of the button element can include HTML comments, text content and only those HTML tags that can be used in phrasing content.

<button> Tag Attributes

Attributes of the <button> tag

global attributes	In addition to the personal attributes of the <button> tag below, any of the common HTML attributes can also be coded.
`autofocus="autofocus"`	Sets the value of the <button autofocus> boolean attribute to `true`. Omitting it sets to `false`.
`disabled="disabled"`	Sets the value of the <button disabled> boolean attribute to `true`. Omitting it sets to `false`.
`form`
`formaction`	a URI reference (or IRI reference depending on the `encoding`) for the destination that is to process the submitted data Use percent escape codes as explained in the URL Encoding Tutorial for any special characters in the URI reference. If the value of the `formaction` attribute resolves to an HTTP URI, it may contain any of the following components: protocol scheme, typically `http:` or else `https:` username, followed by an "@" host name or IP address port number, which defaults to 80 for the `http` scheme and 443 for the `https` scheme absolute or relative path search query, indicated by "?" fragment identifier, indicated by "#" if the response from the form submission has placemarks If the protocol scheme, username, host name/IP address and port number are omitted the default is the current host - the same server as the base of the current document. If the path starts with a slash `/...`, it is an absolute path from the document root directory (AKA "web root") on the server. A relative path will be resolved relative to the base of the current document. A URI with a "#" but no fragment identifier points to the top of the response document.
`formenctype`
`formmethod`
`formnovalidate`
`formtarget`
`name`
`type="submit"` `type="button"` `type="reset"`
`value`

<button> Tag Examples

Examples of the `button` tag in HTML 5

Blinking Buttons

(see Blinking Button Demo above)

<p>
<style scoped="scoped">
div#button-tag-demo * {
   margin: 0;
   padding: 0;
}
@-webkit-keyframes on-blinking-blue {
   from {
      background-color: #0000ff;
   }
   to {
      background-color: #000033;
   }
}
@-webkit-keyframes off-blinking-blue {
   from {
      background-color: #000033;
   }
   to {
      background-color: #0000ff;
   }
}
@-webkit-keyframes on-blinking-red {
   from {
      background-color: #ff0000;
   }
   to {
      background-color: #330000;
   }
}
@-webkit-keyframes off-blinking-red {
   from {
      background-color: #330000;
   }
   to {
      background-color: #ff0000;
   }
}
button.blinking-blue-and-red {
   width: 50px;
   height: 20px;
   border: 3px outset #999999;
   -webkit-animation-iteration-count: infinite;
   -webkit-animation-duration: 0.6s;
}
button#blue-left {
   background-color: #0000ff;
   -webkit-animation-name: on-blinking-blue;
   -webkit-animation-timing-function: ease-in;
}
button#blue-right {
   background-color: #000066;
   -webkit-animation-name: off-blinking-blue;
   -webkit-animation-timing-function: ease-out;
}
button#blank-space {
   display: hidden;
   width: 50px;
   height: 20px;
   border: 3px solid #ffffff;
}
button#red-left {
   background-color: #ff0000;
   -webkit-animation-name: on-blinking-red;
   -webkit-animation-timing-function: ease-in;
}
button#red-right {
   background-color: #aa1111;
   -webkit-animation-name: off-blinking-red;
   -webkit-animation-timing-function: ease-out;
}
button#light-bar {
   width: 275px;
   height: 10px;
   border: 2px outset #999999;
   background-color: #aaaaaa;
   opacity: 0.7;
}
</style>
<button id="blue-left" class="blinking-blue-and-red"></button>
<button id="blue-right" class="blinking-blue-and-red"></button>
<button id="blank-space"></button>
<button id="red-left" class="blinking-blue-and-red"></button>
<button id="red-right" class="blinking-blue-and-red"></button><br/>
<button id="light-bar"></button>
</p>

Animated Buttons

(see Animated Button Demo above)

<p>
<style scoped="scoped">
button.button-bar {
   border: 2px solid #000000;
   border-radius: 10px;
   padding: 4px;
   -webkit-transition:
   -webkit-transform 0.3s ease-in-out
}
button.button-bar:hover { -webkit-transform: scale(1.5); }
</style>
<button class="button-bar">Button A</button>
<button class="button-bar">Button B</button>
<button class="button-bar">Button C</button>
</p>

Changes in HTML 5 - <button> Tag

What's new in HTML 5

A new set of attributes have been added which can be used to override various attributes on the <form> tag.

<button> attribute	overrides <form>
`formaction`	`action`
`formenctype`	`enctype`
`formmethod`	`method`
`formnovalidate`	`novalidate`
`formtarget`	`target`

In addition, the autofocus="autofocus" and form attributes have been added.

Differences between HTML 5 and earlier versions of HTML

The 2000-2010 Recommendations from the W3C HTML Working Group defined the HTML namespace for the button element type name along with the names of all HTML element types. In older (pre-2000) versions of HTML, element type names were not associated with a namespace.

Valid HTML 5