Open In App

HTML Button Tag

Last Updated : 24 May, 2025
Summarize
Comments
Improve
Suggest changes
Share
Like Article
Like
Report

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.

  • Versatile Content: The <button> tag can contain text, images, or other HTML elements.
  • Form Integration: Can be used inside forms to submit or reset data.
  • Event Handling: Supports event attributes like onclick, onmouseover, and onfocus for interactive actions.
  • Customizable Styles: Easily styled with CSS, including properties like border-radius, box-shadow, and animations.

Syntax

<button>Click Me!</button>
  • The opening <button> tag marks the start of the button element.
  • The closing </button> tag indicates the end of the button element.
  • The text Click Me! will be displayed on the 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

button
HTML button Tag

In this example

  • The HTML creates a simple button with the text "Click Me!".
  • The button changes its background color when hovered over.
For more details follow this article => How to add Button Tag in HTML

Attributes

The various attributes that can be used with the "button" tag are listed below:

Attributes

Descriptions

autofocus

Specifies whether the button should automatically get focus or not when the page loads

disabled

Indicate whether the element is disabled or not. If this attribute is set, the element is disabled.

form

Create a form for user input. There are many elements that> are used within the >form tag. 

formaction

Specifies where to send the data of the form.

formnovalidate

Specifies that the Input Element should not be validated when submitting the form.

formenctype

Specifies that the form data should be encoded when submitted to the server.

formmethod

Specifies the HTTP method used to send data while submitting the form.

formtarget

Specifies the name or a keyword that indicates where to display the response after submitting the form.

type

Specifies the type of button for button elements. It is also used in <input> element to Specifies the type of input to display.

value

Specifies the value of the element with which it is used. It has different meanings for different HTML elements.

Note=> It is important to specify the type attribute for a button element to inform the browser of the button's function.

Reset Button

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

  • The HTML code creates a form with three fields: username, email, and password.
  • A Reset button is added, which resets all the form fields to their default values when clicked.

HTML Animated Button

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

hover-on-

In this example

  • The button changes color, scales up, and adds a shadow when hovered.
  • It has smooth transitions and no outline when focused.

HTML Button Groups

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

button-grp


HTML Disabled Buttons

In 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

disabled-button
HTML button Tag

In this example

  • Disabled Buttons: The disabled attribute makes buttons non-interactive (unclickable).
  • Visual Effect: Disabled buttons appear gray and use the cursor: not-allowed style.
  • Usage: Prevents users from clicking the button when certain actions or conditions are not met.

Event Attributes of the <button> Tag

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 CSS

Using JavaScript

Note => The HTML <button> tag supports the Global Attribute and Event Attribute in HTML.

Conclusion

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.


Next Article
HTML a Tag

S
sheyakhare1999
Improve
Article Tags :

Similar Reads

We use cookies to ensure you have the best browsing experience on our website. By using our site, you acknowledge that you have read and understood our Cookie Policy & Privacy Policy
Lightbox