HTML <button> Tag
Concept
The HTML <button> tag is used to create clickable buttons within a web page. These buttons can be styled using CSS and can perform various actions when clicked, such as submitting a form or triggering a JavaScript function.
Implementation
Example 1: Basic Button
A simple clickable button can be created as follows:
<button>Click on Me!</button>
Example 2: Button with CSS Styling
You can use CSS to style buttons, including adding hover effects:
<!DOCTYPE html>
<html>
<head>
<style>
.button {
background-color: blue;
color: white;
padding: 10px;
border: none;
cursor: pointer;
font-size: 16px;
}
.button:hover {
background-color: lightblue;
}
</style>
</head>
<body>
<button class="button">Blue</button>
</body>
</html>
Try it out below
Attributes
The following table lists the attributes that can be used with the <button> tag:
| Attribute | Value | Description |
|---|---|---|
autofocus |
autofocus | Specifies that a button should automatically get focus when the page loads. |
disabled |
disabled | Specifies that a button should be disabled. |
form |
form_id | Specifies which form the button belongs to. |
formaction |
URL | Specifies where to send the form-data when a form is submitted. Only for type=”submit”. |
formenctype |
application/x-www-form-urlencoded multipart/form-data text/plain |
Specifies how form-data should be encoded before sending it to a server. Only for type=”submit”. |
formmethod |
get/post Method | Specifies how to send the form-data (which HTTP method to use). Only for type=”submit”. |
formnovalidate |
formnovalidate | Specifies that the form-data should not be validated on submission. Only for type=”submit”. |
formtarget |
-blank -self -parent -top framename |
Specifies where to display the response after submitting the form. Only for type=”submit”. |
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. |
Global Attributes
The <button> tag also supports the Global Attributes in HTML.
Event Attributes
The <button> tag also supports the Event Attributes in HTML.
Browser Support
| Element | Chrome | Firefox | Safari | IE | Edge |
|---|---|---|---|---|---|
<button> |
Yes | Yes | Yes | Yes | Yes |
More Examples
You can further explore styling buttons with CSS and adding hover effects in the examples provided below.
This example demonstrates creating two buttons with different styles and hover effects. The CSS code defines the styles for the buttons, including their appearance, size, and transition effects.
In this example, two buttons are styled with different colors and hover effects. The .button-green class styles the first button with a green border and changes the background color to green when hovered over. Similarly, the .button-blue class styles the second button with a blue border and changes the background color to blue when hovered over.
The use of the transition-duration property ensures a smooth transition effect when the mouse is moved over the buttons.
Conclusion
The <button> tag is a versatile and essential part of HTML, allowing developers to create interactive and engaging user interfaces.
By combining it with CSS and JavaScript, you can create buttons that not only look appealing but also perform various functions, enhancing the overall user experience.