Last Updated : 11 Jul, 2025
The <button> tag in HTML is used to create clickable buttons on a webpage. These buttons can trigger various actions, such as submitting a form, running JavaScript functions, or simply interacting with users.
Syntax
<button>Click Me!</button>
Now let's understand this with the help of example
HTML
<html>
<head>
<title>Centered Button Example</title>
<style>
body,
html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
button {
padding: 15px 30px;
font-size: 16px;
background-color: blue;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
button:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<button>Click Me!</button>
</body>
</html>
Output
HTML button TagIn this example
For more details follow this article => How to add Button Tag in HTMLAttributes
The various attributes that can be used with the "button" tag are listed below:
Attributes
Descriptions
Specifies whether the button should automatically get focus or not when the page loads
Indicate whether the element is disabled or not. If this attribute is set, the element is disabled.
Create a form for user input. There are many elements that> are used within the >form tag.
Specifies where to send the data of the form.
Specifies that the Input Element should not be validated when submitting the form.
Specifies that the form data should be encoded when submitted to the server.
Specifies the HTTP method used to send data while submitting the form.
Specifies the name or a keyword that indicates where to display the response after submitting the form.
Specifies the type of button for button elements. It is also used in <input> element to Specifies the type of input to display.
Specifies the value of the element with which it is used. It has different meanings for different HTML elements.
Reset ButtonNote=> It is important to specify the type attribute for a button element to inform the browser of the button's function.
A reset button resets all the form fields to their default values. It's created by setting the type attribute to reset inside the <button> tag.
HTML
<html>
<head>
<title>Centered Reset Button Example</title>
<style>
/* Center the form using Flexbox */
body,
html {
height: 100%;
margin: 0;
display: flex;
justify-content: center;
align-items: center;
font-family: Arial, sans-serif;
}
form {
text-align: center;
padding: 20px;
border: 1px solid #ccc;
border-radius: 10px;
}
button {
padding: 10px 20px;
background-color: blue;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
button:hover {
background-color: darkblue;
}
</style>
</head>
<body>
<form>
<label for="username">Username:</label>
<input type="text" id="username" name="username" placeholder="Enter your username"><br><br>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="Enter your email"><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" placeholder="Enter your password"><br><br>
<!-- Centered Reset Button -->
<button type="reset">Reset</button>
</form>
</body>
</html>
Output
In this example
An HTML Animated Button can be enhanced with various animations to make it visually engaging and interactive.
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Animated Button Example</title>
<style>
button {
padding: 15px 30px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
cursor: pointer;
transition: all 0.3s ease;
}
button:hover {
background-color: #45a049;
transform: scale(1.1);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
button:focus {
outline: none;
}
</style>
</head>
<body>
<button>Hover Over Me!</button>
</body>
</html>
Output
In this example
HTML Button Groups are used to group multiple buttons together, typically to create related actions or options. Button groups help maintain a clean and organized layout, especially when we have multiple buttons performing related tasks.
HTML
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Horizontal Button Group</title>
<style>
.button-group {
display: flex;
justify-content: center;
gap: 10px;
}
.button-group button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 8px;
border: 1px solid #ccc;
}
.button-group button:hover {
background-color: #3498db;
color: white;
}
</style>
</head>
<body>
<div class="button-group">
<button>Option 1</button>
<button>Option 2</button>
<button>Option 3</button>
</div>
</body>
</html>
Output
HTML Disabled ButtonsIn HTML, the disabled attribute is used to make a button non-interactive, meaning users cannot click or interact with it. When a button is disabled, it visually appears inactive, and its functionality is prevented.
HTML
<html>
<head>
<title>Disabled Buttons Example</title>
<style>
button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
border-radius: 8px;
border: 1px solid #ccc;
}
button:disabled {
background-color: #e0e0e0;
color: #a0a0a0;
cursor: not-allowed;
}
</style>
</head>
<body>
<button>Active Button</button>
<button disabled>Disabled Button</button>
<button disabled>Another Disabled Button</button>
</body>
</html>
Output
HTML button TagIn this example
The <button> tag supports various event attributes that allow us to trigger actions in response to user interactions. Some of the commonly used event attributes are:
1. onclick: This event is triggered when the button is clicked.
<button onclick="alert('Button Clicked!')">Click Me!</button>
2. onmouseover: This event is triggered when the user hovers over the button.
<button onmouseover="this.style.backgroundColor = 'yellow'">Hover Over Me!</button>
3. onmouseout: This event is triggered when the mouse leaves the button.
<button onmouseout="this.style.backgroundColor = ''">Mouse Out Button</button>
4. onfocus: This event is triggered when the button gains focus (e.g., clicked or tabbed into).
<button onfocus="this.style.backgroundColor = 'lightblue'">Focus Me!</button>
5. onblur: This event is triggered when the button loses focus.
<button onblur="this.style.backgroundColor = ''">Blur Me!</button>
Now you have clear understanding of HTML <button> so you can implement this knowledge to create some interesting components using CSS and JavaScript–
Using CSSConclusionNote => The HTML <button> tag supports the Global Attribute and Event Attribute in HTML.
We’ve covered the essential aspects of the <button> tag, from basic usage to more advanced features like event handling, styling, and animation. We've also explored various button types, including reset, submit, and disabled buttons, as well as how to add images, use the border-radius property, and create animated or shadow effects.
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4