HTML Tag

HTML

<button>

Tag

Example

A clickable button is marked up as follows:

<button type=”button”>Click Me!</button>

Try it Yourself »

More “Try it Yourself” examples below.

Definition and Usage

The <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 Attributes

The <button> tag also supports the Global Attributes in HTML.

Event Attributes

The <button> tag also supports the Event Attributes in HTML.

More Examples

Example

Use 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 »

Example

Use 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 Pages

HTML DOM reference: Button Object

CSS Tutorial: Styling Buttons

Default CSS Settings

None.