HTML Button Tag | Docs With Examples

Buttons in HTML are interactive elements that allow users to trigger actions, such as submitting a form, navigating to another page, or executing JavaScript functions. The <button> element is the primary way to create buttons in HTML. They are widely supported across browsers and are an essential part of web development for both beginners and experienced web developers.

Basic Syntax of an HTML Button

If your HTML project needs a button, use this simple syntax to create a simple clickable button. In this case, we have the text "Click Me".

<button>Click Me</button>

Different Types of HTML Buttons

The <button> tag supports different type attributes that define its behavior:

1. Submit Button

By default, a button inside a form acts as a submit button, submitting the form data when clicked.

<form>
    <button type="submit" name="submitButton">Submit</button>
</form>

Here, the name attribute is used to identify the button when handling form submissions.

2. Reset Button

A reset button clears all form inputs. Open up an HTML editor to see for yourself.

<form>
    <input type="text" placeholder="Enter your name">
    <button type="reset">Reset</button>
</form>

3. Button Without Default Behavior

The button type explicitly defines a button with no default form submission behavior, making it ideal for JavaScript functions.

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

Using Buttons to Navigate to Another Page

Buttons can be used as links by wrapping them inside an <a> tag or using JavaScript.

<a href="https://www.example.com">
    <button>Go to Example</button>
</a>

Or using JavaScript:

<button onclick="window.location.href='https://www.example.com'">Go to Example</button>

Using Buttons with JavaScript

HTML buttons are often used to execute JavaScript functions and handle click events.

<button onclick="alert('Button clicked!')">Click Me</button>

Adding an Image Inside a Button

Buttons can contain HTML elements, including img tags to enhance their appearance.

<button>
    <img src="icon.png" alt="icon"> Click Me
</button>

This is useful for creating visually appealing buttons with icons.

Styling Buttons with CSS

You can style buttons using CSS to improve their appearance.

button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    font-size: 16px;
    cursor: pointer;
}
button:hover {
    background-color: darkblue;
}

• The font-size property adjusts the text size.
• The cursor: pointer; ensures a clickable interaction.

Creating a Button Group

A button group is a set of buttons arranged together in a layout.

<div>
    <button>Option 1</button>
    <button>Option 2</button>
    <button>Option 3</button>
</div>

CSS can be used to align them properly.

div {
    display: flex;
    gap: 10px;
}

Disabling a Button

Use the disabled attribute to make a button unclickable.

<button disabled>Disabled Button</button>

Common Questions About HTML Buttons

What are HTML buttons?

HTML buttons are interactive elements created using the <button> tag or <input type="button">. They allow users to trigger actions such as submitting a form, navigating pages, or executing JavaScript functions.

What is the difference between <button> and <input type="button">?

• The <button> tag allows for rich HTML content, including images and icons.
• The <input type="button"> tag is a self-closing element that only allows plain text labels.

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

Are buttons inline or block?

By default, <button> elements are inline-block, meaning they fit within the flow of text but can also take block-level properties when styled.

Can HTML buttons have href?

No, the <button> element does not support the href attribute like an <a> tag for an HTML link. However, you can use JavaScript to achieve a similar effect:

<button onclick="window.location.href='https://www.example.com'">Go to Example</button>

Can HTML buttons have value?

Yes, buttons can have a value attribute, which is often used when submitting form data.

<button type="submit" value="submitValue">Submit</button>

For <input type="button">, the value attribute defines the button’s label:

<input type="button" value="Click Me">

Can buttons have an id attribute?

Yes, buttons can have an id attribute to uniquely identify them.

<button id="myButton">Click Me</button>

This is useful when manipulating buttons via JavaScript.

document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
});

Key Takeaways

• The <button> tag is the most flexible way to create buttons in HTML.
• Buttons can have different type attributes: submit, reset, or button.
• You can use CSS to style buttons and improve user interaction.
• JavaScript can be used to add interactivity and navigation functions.
• The disabled attribute prevents user interaction with a button.
• Buttons can contain HTML elements like images, making them highly customizable.
• Button groups can be created using CSS for improved layout.

Wrapping Up

HTML buttons play an important role in web interactions, from submitting forms to executing JavaScript functions. Understanding how to use and style buttons effectively can improve both functionality and user experience on a website.

Whether you're a beginner or an experienced web developer, mastering the HTML button tag and its related properties like id, name, click event, and layout will enhance your ability to create interactive and accessible web pages.