HTML <button> Tag

The <button> tag creates a clickable button, permitting nested text and tags such as <i>, <b>, <strong>, <br>, <img>, offering more versatility compared to buttons made with <input>.

Syntax:

<button type = "button"> Click Me </button>

Note:

It is important to specify the type attribute for a button element to inform the browser of the button’s function.
The HTML <button> tag supports the Global Attribute and Event Attribute in HTML.

Attributes

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

Attributes	Descriptions
autofocus	It is used to specify whether the button should automatically get focus or not when the page loads
disabled	It is used to indicate whether the element is disabled or not. If this attribute is set, the element is disabled.
form	It is used to create a form for user input. There are many elements that> are used within the >form tag.
formaction	It is used to specify where to send the data of the form.
formnovalidate	It is used to specify that the Input Element should not be validated when submitting the form.
formenctype	It is used to specify that the form data should be encoded when submitted to the server.
formmethod	It is used to specify the HTTP method used to send data while submitting the form.
formtarget	It is used to specify the name or a keyword that indicates where to display the response after submitting the form.
type	It is used to specify the type of button for button elements. It is also used in <input> element to specify the type of input to display.
value	It is used to specify the value of the element with which it is used. It has different meanings for different HTML elements.

Example 1: In this example, we define a button that triggers an alert when clicked, displaying the message “Welcome to w3wiki”.

HTML

<!DOCTYPE html>
<html>

<body>
    <h3>HTML button Tag</h3>

    <!-- Button tag starts from here -->
    <button type="button" 
            onclick="alert('Welcome to w3wiki')">
        Click Here
    </button>
    <!-- Button tag ends here -->

</body>

</html>

Output:

Example 2: In this example, we define a styled button. It includes buttons styled with different colors for various purposes and hover effects for enhanced user interaction.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0">
    <title>HTML Button</title>
    <style>
        body {
            text-align: center;
        }

        button {
            padding: 10px 20px;
            font-size: 16px;
            margin-top: 40px;
            border: none;
            cursor: pointer;
            border-radius: 4px;
            transition: background-color 0.3s ease;
        }

        .blue {
            background-color: #3daaf3;
            color: #fff;
        }

        .green {
            background-color: #3bda7d;
            color: #fff;
        }

        .warnning {
            background-color: #f08f3b;
            color: #fff;
        }

        .red {
            background-color: #e44331;
            color: #fff;
        }

        /* Hover Styles */
        button:hover {
            background-color: #616161;
        }
    </style>
</head>

<body>
    <div>
        <img src=
"https://media.w3wiki.net/gfg-gg-logo.svg" alt="btn">
    </div>
    <button class="blue">Primary</button>
    <button class="green">Secondary</button>
    <button class="warnning">Warning</button>
    <button class="red">Danger</button>
</body>

</html>

Output:

Syntax:

Attributes

Browser Support

Contact Us