HTML <button> Tag

Today we are going to talk about the Tag button. It would be helpful if it could fulfil the requirements of learning.

The HTML <button> tag is used to create a clickable button on a web page that performs an action when clicked. It is a versatile element that can be used for a variety of purposes, such as submitting forms, triggering scripts, or navigating to a different web page.

Clickable buttons are displayed in the following way:


<!DOCTYPE html> <html> <body> <button type="button">Click Me!</button> </body> </html>

For styling buttons, implement CSS:


<!DOCTYPE html> <html> <head> <style> .button {border: none; color: white; padding: 10px 28px;text-align: center; text-decoration: none; display: inline-block;0 font-size: 12px; 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>

Style buttons using CSS (including the 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: 3px solid #4CAF50; }.button1:hover { background-color: #4CAF50;color: white; }.button2 { background-color: white; color: black; border: 3px 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>

Here is an example of the button tag in html with javascripit:


<!DOCTYPE html> <html> <body> <button type="button" onclick="alert('Button clicked!')">Click me</button> <button disabled type="button" onclick="alert('Button clicked!')">Click me</button> </body> </html>

Uses and Definition

Button Tags <button> identify clickable buttons.

Text (including tags such as <i>, <b>, <strong>, <br>, <img>, and so on) can be placed inside a <button> element. That is not feasible with an <input> element-created button.

Advice: In the Tag button, always include a type attribute that indicates to a browser what type of button is being displayed.
Tip: You can style buttons with CSS in no time at all. Here are some examples. Check out our upcoming tutorial on CSS Buttons.

Browser Compatibility



formactionURLWhen a form is submitted, it determines where the form data should go. applies only to the type “submit.”
Sets where the response should be shown after the form has been sent.This applies only to the type “submit”.
namenameSet the name of the button in Tag button.
Indicates what type of button it is.
formform_idIndicates which form the button refers to.
valuetextDetermine the button’s initial value.
autofocusautofocusIndicates that a should be focused a button immediately on page load.
disableddisabledAllows you to disable a button.
Before submitting form data to a server, describe how it must be encoded. applies only to the type “submit.”
Determines the HTTP method to use for sending form data. This applies only to the type “submit”.
formnovalidateformnovalidateIndicates that the form data should not be checked on submission. This applies only to the type “submit”.

Global Attributes

HTML’s Global Attributes are backed by the Tag button <button>.

Event Attributes

HTML’s Tag button <button> also works with Event Attributes.

Importance of HTML Button

Here are some reasons why HTML buttons are important:

  • Buttons allow users to interact with a web page, providing an intuitive and easy-to-use interface for performing actions, submitting forms, and navigating through a website.
  • Buttons are commonly used to create a call to action on a web page, encouraging users to take a specific action, such as clicking to learn more or making a purchase.
  • Buttons can be styled to match the look and feel of a website, making them an important element of web design. With a wide variety of styles and options available, buttons can be customized to fit the overall aesthetic of a website.
  • Buttons are an important element of web accessibility, as they provide a clear and easy-to-understand way for users to interact with a website. Buttons can be designed to be easily navigated using assistive technologies such as screen readers.
  • HTML buttons are supported by all major web browsers, making them a reliable and consistent element across different platforms and devices.
If this article was informative enough to meet your educational desires, then do subscribe to our Newsletter below in order to be in touch with the similar content.
We value your feedback.

Subscribe To Our Newsletter
Enter your email to receive a weekly round-up of our best posts. Learn more!

Leave a Reply

Your email address will not be published. Required fields are marked *