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:
Example:
<!DOCTYPE html>
<html>
<body>
<button type="button">Click Me!</button>
</body>
</html>
For styling buttons, implement CSS:
Example
<!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)
Example
<!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:
Example:
<!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>
Table Of Content-
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
| Element |  |  |  |  |  |
|---|---|---|---|---|---|
| <button> | Yes | Yes | Yes | Yes | Yes |
Attributes
| Attribute | Value | Overview |
|---|---|---|
| formaction | URL | When a form is submitted, it determines where the form data should go. applies only to the type “submit.” |
| formtarget | _blank _self _parent _top framename | Sets where the response should be shown after the form has been sent.This applies only to the type “submit”. |
| name | name | Set the name of the button in Tag button. |
| type | button reset submit | Indicates what type of button it is. |
| form | form_id | Indicates which form the button refers to. |
| value | text | Determine the button’s initial value. |
| autofocus | autofocus | Indicates that a should be focused a button immediately on page load. |
| disabled | disabled | Allows you to disable a button. |
| formenctype | application/x-www-form-urlencoded multipart/form-data text/plain | Before submitting form data to a server, describe how it must be encoded. applies only to the type “submit.” |
| formmethod | get post | Determines the HTTP method to use for sending form data. This applies only to the type “submit”. |
| formnovalidate | formnovalidate | Indicates 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.
+1
+1
+1
+1
+1
+1
+1
