HTML <button> tag

Use of <button> tag

The <button> tag is used to create a clickable button. It is mainly used within HTML form. You can also use <input> tag to create similar buttons. You can place content like text or images within <button> tag while it is not in the case of <input> tag.
By default, the <button> element do not perform any action when click. Inorder to perform an action when click, we prefer <button> 's attributes using mainly JavaScript Code.
Different browsers show different default types for the <button> element. You also can create custom button using CSS. see example.

Type: Inline Element

Example of <button> tag

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

Supported Browsers

Tag Chrome browser Internet explorer browser Firefox browser Safari browser Opera browser
<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 the button, the page will say "You pressed the button". </p>
</body>
</html>

Output


When you click on the button, the page will say "You pressed the button".

Attributes of <button> tag

Attribute Value Notes
autofocus autofocus It specifies that a button should automatically get focus when the page loads.
disabled disabled It defines a button which could not be clicked.
form form_id It defines one or more forms that the button belongs to.
formaction URL It defines the URL of the form data when the user submit the form.
formmethod get
post
It defines which HTTP type to be used when submitting form-details.
formnovalidate formnovalidate It defines the form-details should not be validated when submit a form.
formtarget _blank
_self
_parent
_top
It defines how to display the page after submitting the form-details of a form.
name name It defines the name of a button.
type button
reset
submit
It defines the name of a button.
value text It defines an initial value for the button.

Note that:
1. autofocus, form, formaction, formmethod, formnovalidate and formtarget attributes are new in HTML5.
2. formaction , formmethod , formnovalidate and formtarget attributes are valid only for button element with type="submit".

More Reference

You can create custom button styles using CSS code.
Some button styles are given below:


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: #158c5c;
color: white;
padding: 8px 16px;
text-align: center;
font-size: 16px;
cursor: pointer;
}

Show code for Button3

button {
background-color: #dee8e4;
color: black;
border: none;
padding: 8px 16px;
text-align: center;
font-size: 16px;
cursor: pointer;
}

Show code for Button4

button {
background-color: #c11169;
color: white;
border: none;
padding: 8px 16px;
text-align: center;
font-size: 16px;
cursor: pointer;
}


Button element can also be act as a link element. Following button is linked button.


Show code how to make Linked button

<!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= 'http://myhtml5tutorials.com'"> Linked Button </button>
</body>
</html>


You also might see some buttons are disabled under some circumstances. For example, the below button will be disabled until you click the tick mark.

I accept the terms of services and privacy policy.

Show code how to make it

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<form action = "tag_button.html" target = "blank" name = "checkme" method = "get">
<input style = "margin:0px 10px 10px 0px" type = "checkbox" id = "checkme"/> I accept the terms of services and privacy policy. <br>
<input type = "submit" name = "demo" disabled = "disabled" id = "demo" value = " Proceed " />
</form>
<script>
var checker = document.getElementById('checkme');
var sendbtn = document.getElementById('demo');
checker.onchange = function(){
if(this.checked){
sendbtn.disabled = false;
} else {
sendbtn.disabled = true;
}
}
</script>
</body>
</html>