❮ Previous Next ❯

HTML <button> tag

The <button> tag is used to create a clickable button and it is mainly used within an HTML <form> element. Unlike the <input> tag, the <button> element can contain content such as text or images. By default, the <button> element does not perform any action when clicked. To perform an action when clicked, the <button> element is usually used with JavaScript. Different browsers may show different default styles for the <button> element. You can also create custom buttons using CSS. (see example)

Type: Inline Element

Syntax of <button> tag

<button type="button"> Clickable button </button>

Supported Browsers

Tag Chrome Internet Explorer Firefox Safari Opera Mini
<button> Yes Yes Yes Yes Yes

Full code example

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<button type="button" onclick="alert('You pressed the button)">
Click Me!
</button>
<p>
When you click on this button, the page will alert you by saying "You pressed the button".
</p>
</body>
</html>
Run The code »

Output on the browser

When you click on this button, the page will alert you by saying "You pressed the button".

Attributes of <button> tag

Attribute Value Note
autofocus autofocus It specifies that a button should automatically get focus when the page loads.
disabled disabled It defines a button which can't be clicked.
form form_id It specifies the form that the button belongs using the form's id
formaction URL It defines the URL of the form data after the users submit the form.
formmethod get
post		 It defines which HTTP method to be used when submitting form-details.
formnovalidate formnovalidate It defines the form-details should not be validated when the form is submitted.
formtarget _self
_blank
_parent
_top		 It defines where to display the page after clickling the button.
name name It specifies the name of the button.
type button
reset
submit		 It defines the type of the button.
value text It specifies the value associated with the button.
The autofocus, form, formaction, formmethod, formnovalidate, and formtarget attributes were introduced in HTML5, and formaction, formmethod, formnovalidate, and formtarget are effective only for the <button> element with type="submit", which means they are ignored for the <button> element with type="button" or "reset".

More reference

You can create custom design button using CSS properties.

Show code for Button1 
button
{
  background-color: #021028;
  color: white;
  padding: 8px 16px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
Show code for Button2 
button
{
  background-color: #dee8e4;
  color: black;
  padding: 8px 16px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

The <button> element can also be act as a link element. Following button is a linked button.

Full code example

<!DOCTYPE html>
<html>
<head>
<style>
button
{
  background-color: #021028;
  color: white;
  padding: 8px 16px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
</style>
</head>
<body>
<button onclick="window.location.href='/html-a-tag/'"> Linked Button </button>
</body>
</html>
Run The code »
❮ Previous Next ❯