HTML - <button> Tag

HTML <button> tag is used to create a button. Buttons are normally used on forms to submit the form, or it can be use anywhere where we need to triger any action like - clear, delete, copy, paste, etc. By default, HTML buttons are rendered in a style that matches the platform the user is running on, but you can change button styles such as color, width, height, etc, using CSS.

Syntax

<button>button name</button>

Attribute

HTML button tag supports Global and Event attributes of HTML. And some specific attributes as well which are listed bellow.

Attribute	Value	Description
autofocus	autofocus	A button getting focus when the page loads
disabled	disabled	Disable a button
form	form_id	One or more forms the button belongs to
formaction	URL	For type="submit". Where to send the form-data when a form is submitted.
formenctype	application/x-www-form-urlencoded multipart/form-data text/plain	For type="submit". How form-data should be encoded before sending it to a server.
formmethod	get post	For type="submit". How to send the form-data "
formnovalidate	formnovalidate	For type="submit". The form-data should not be validated on submission.
formtarget	_blank _self _parent _top framename	For type="submit". Where to display the response after submitting the form.
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

Examples of HTML button Tag

Bellow examples will illustrate the usage of button tag, where, when and how to use it to create buttons and how we can style the buttons using CSS.

Creating a HTML Button

In the following program, we are using the HTML <button> tag to create a button with the name "click" in HTML.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML Button</title>
</head>

<body>
   <h1>HTML button</h1>
   <!-- HTML Button -->
   <button>click</button>
</body>

</html>

Disable HTML Button

Sometmes we will required to make buttons disable for certain condtions, here we will create a dummy disable button.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Button</title>
</head>

<body>
    <h1>HTML button Tag</h1> 
    <strong>Normal HTML Button:</strong>
    <!-- HTML Button -->
    <button>Submit</button> 
    <br><br>
    <strong>Disable HTML Button:</strong>
    <!-- HTML Button -->
    <button disabled>Submit</button> 
</body>

</html>

Styling HTML Button

Following is another example of an HTML <button> tag. Here, we are creating an HTML button named "ClickMe!" Using the <button> tag, and, we are using CSS to style the button we have created.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Button</title>
    <style>
    button {
        margin: 10px;
        padding: 10px;
        border-radius: 5px;
        background-color: green;
    }
    </style>
</head>

<body>
    <h1>HTML button Tag</h1>
    <!-- HTML Button -->
    <button>ClickMe!</button> 
</body>

</html>

HTML Button with Link

HTML button can work as a link as well, in this examplee we will create a button that will be linked to our home page. We can wrap the button with HTML <a> tag or we can use onclick function to trgger the mentioned url.

<!DOCTYPE html>
<html lang="en">

<head>
    <title>HTML Button</title>
    <style>
    button {
        margin: 10px;
        padding: 10px;
        border-radius: 5px;
        background-color: green;
    }
    </style>
</head>

<body>
    <h1>HTML button Tag</h1>
    <strong>Button with Link</strong>
    <!-- HTML Button using anchor tag -->
    <a href="https://www.tutorialspoint.com/index.htm">
    <button>
        Tutorialspoint
    </button>
    </a>
    <!-- HTML Button using OnClick -->
    <button onclick="window.location.href = 'https://www.tutorialspoint.com/index.htm';">
        Tutorialspoint
    </button>
</body>

</html>

Supported Browsers

Tag
button	Yes	Yes	Yes	Yes	Yes

html_tags_reference.htm