Open In App

HTML <button> Tag

Improve
Improve
Like Article
Like
Save
Share
Report

HTML <button> tag defines a clickable button within a form or standalone. It can contain text or images and triggers an action when clicked, typically associated with JavaScript functions or form submissions.

The <button> element in HTML allows the inclusion of text and various tags like <i>, <b>, <a>, <span>,<div>.

Note:

  • It is important to always specify the type attribute for a button element to inform the browser what type of button it is.
  • The HTML <button> tag supports the Global Attribute and Event Attribute in HTML.

Syntax:

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

Attributes:

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

Attributes

Descriptions

autofocus

It is used to specify that the button should get automatically get focus or not when the page loads

disabled

It is used indicates 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 submitting 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 which 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 meaning for different HTML elements.

HTML <button> tag Examples

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

HTML
<!DOCTYPE html>
<html>

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

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

</body>

</html>

Output:

HTMLButtonTag

Example 2: In this example, we defines a styled buttons. 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;
        }

        /* Button Styles */

        .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.geeksforgeeks.org/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:

HtmlButtonsHover

Supported Browsers

The browser supported by HTML <button> tag are listed below:


Last Updated : 12 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads