HTML <button> Tag
The <button> tag is used to create clickable buttons on the web page. The difference between these elements and buttons created with the <input> tag is that you can place the content (images or text) inside the <button>.
TIP
Use the <input> element to define a button within HTML form, as browsers display the content of the <button> tag differently.
Syntax
The <button> tag comes in pairs. The content is written between the opening (<button>) and closing (</button>) tags.
Example of the HTML <button> tag:
Example of HTML <button> Tag
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
<h1>Here will be our button</h1>
<button type="button">Click</button>
</body>
</html>Using CSS styles
You can apply CSS styles to the <button> tag to change the appearance of the button, its size, color, text font, and so on.
Example of the <button> tag with CSS styles:
Example of HTML <button> Tag with CSS color and font properties
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
Ordinary button
<button type="button">Add to the recycle bin</button>
<hr />
Button with red text
<button type="button" style="color: red;"><b>HTML Book </b></button>
<hr />
Button with increased font size
<button type="button" style="font: bold 14px Arial;">Download the book </button><br />
</body>
</html>Result
Attributes
TIP
The <button> tag doesn’t have required attributes; however, we recommend always using the type="button" attribute if the tag is used as an ordinary button.
Note: If the type attribute is omitted and the button is placed inside a HTML form, it defaults to type="submit".
Attributes
| Attributes | Value | Description |
|---|---|---|
autofocus | autofocus | Specifies that the button should receive focus after loading the page. |
disabled | disabled | Deactivates the button. (Used when the button should become active after performing some action.) |
form | form_id | Specifies one or more forms the button belongs to. If the button has multiple forms, then their identifiers (form_id) must be separated by spaces. |
formaction | URL | Defines the address, where the form data will be sent after clicking on the button. (Used only for the buttons with the type="submit" attribute). |
formenctype | application/x-www-form-urlencoded | Defines how the form-data should be encoded when a form is submitted. (Used only for type="submit"). All symbols are encoded before a form is submitted (default value). |
multipart/form-data | Encodes data as multipart MIME. | |
text/plain | Spaces are being replaced by the sign "+", but symbols aren’t encoded. | |
formmethod | get | Defines the method of the HTTP request, which will be used when a form is submitted (only for type="submit"). Passes the form data in the address bar ("name = value"), which are added to the URL of the page after the question mark and are separated by an ampersand (&). |
post | The browser communicates with the server and sends the data for processing. | |
formnovalidate | formnovalidate | Specifies that the form-data should not be validated on submission (only for type="submit"). |
formtarget | _blank | Specifies where the response will be shown after the form is submitted (only for type="submit"). Opens the response in a new window. |
_self | Opens the response in the current window. | |
_parent | Opens the response in the parent frame. | |
_top | Opens the response in the full width window. | |
name | name | Defines the button name. |
type | button | Defines an ordinary button. |
reset | Button that clears the form from the input data. | |
submit | Button for sending form data. | |
value | text | Defines the button value. |
The <button> tag also supports the Global Attributes and the Event Attributes.
How to add alt text to a button with an image?
To add alt text to a button with an image, you can use the alt attribute. Here is an example:
How to add alt text to a button with an image?
<button type="button">
<img src="button-image.png" alt="Button Label">
</button>In this example, the alt attribute has been added to the img element inside the button element. The value of the alt attribute should be a short description of the image, which will be read by screen readers in place of the image itself.
How to add a link to a button?
To create a clickable link that looks like a button, use an <a> element styled with CSS. Wrapping a <button> inside an <a> is invalid in HTML5. Here is the correct approach:
How to add a link to a button?
<a href="https://example.com" class="button-link">
Button Label
</a>In this example, the <a> element is styled to resemble a button. When the user clicks on it, they will be taken to the linked URL.
Practice
What are some properties and usage of the HTML <button> tag?