HTML Buttons

HTML buttons are interactive elements that allow users to perform actions on a web page. Buttons are commonly used for submitting forms, opening menus, triggering JavaScript functions, resetting forms, and performing other actions.

The HTML <button> element is used to create a button.

What Is an HTML Button?

An HTML button is created using the <button> tag.

Basic Example

<button>Click Me</button>

The browser displays a clickable button with the text Click Me.

The content placed between the opening and closing <button> tags becomes the button’s label.

HTML Button Syntax

The basic syntax is:

<button>Button Text</button>

For example:

<button>Learn HTML</button>

You can also place other HTML content inside a button when appropriate.

<button>
  Save Changes
</button>

Button Types in HTML

The <button> element has a type attribute that defines how the button behaves, especially when it is inside a form.

There are three common button types:

• submit
• reset
• button

Submit Button

A submit button submits a form.

<form>
  <input type="text" name="username">
  <button type="submit">Submit</button>
</form>

When the user clicks the button, the browser attempts to submit the form.

Reset Button

A reset button resets form controls to their initial values.

<form>
  <input type="text" name="username">
  <button type="reset">Reset</button>
</form>

Clicking Reset restores the form fields to their initial state.

Button Type

The button type creates a general-purpose button that does not submit or reset a form by itself.

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

This type is commonly used with JavaScript.

HTML Buttons with JavaScript

Buttons are often used to trigger JavaScript actions.

<button type="button" onclick="showMessage()">
  Click Me
</button>

<script>
  function showMessage() {
    alert("Hello from Web4Learners!");
  }
</script>

When the user clicks the button, the JavaScript function runs and displays a message.

Styling HTML Buttons with CSS

HTML creates the button, while CSS can be used to change its appearance.

<style>
  button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
  }
</style>

<button>Click Me</button>

CSS can control properties such as:

• Background color
• Text color
• Font size
• Padding
• Border
• Border radius
• Width and height
• Hover effects

Button Hover Effect

You can change the appearance of a button when the user moves the mouse over it.

<style>
  button {
    background-color: blue;
    color: white;
    padding: 10px 20px;
    border: none;
  }

  button:hover {
    background-color: darkblue;
  }
</style>

<button>Hover Over Me</button>

The :hover pseudo-class applies the specified styles when the pointer is over the button.

Using an ID with a Button

You can assign an ID to a button when you need to identify a specific button.

<button id="loginButton">Login</button>

The ID can then be used with CSS or JavaScript.

#loginButton {
  background-color: green;
}

Using a Class with Buttons

Classes are useful when multiple buttons should have the same styling.

<button class="btn">Login</button>
<button class="btn">Register</button>
<button class="btn">Contact</button>

CSS can style all of them together:

.btn {
  padding: 10px 20px;
  background-color: blue;
  color: white;
}

Button vs Link

Buttons and links have different purposes.

Use a <button> when the user is performing an action, such as:

<button>Open Menu</button>

Use an <a> element when the user is navigating to another location:

<a href="/html/">Learn HTML</a>

A button should not normally be used just to navigate to another page when a normal link is appropriate.

Buttons Inside Forms

Buttons are commonly used with HTML forms.

<form>
  <label for="email">Email:</label>
  <input type="email" id="email" name="email">

  <button type="submit">Subscribe</button>
</form>

Here, clicking the button submits the form.

When a <button> is placed inside a form, explicitly specifying type is a good practice because the default type for a button associated with a form is submit.

Best Practices for HTML Buttons

Follow these practices when creating buttons:

• Use <button> for actions.
• Use <a> for navigation.
• Specify the type attribute, especially inside forms.
• Use clear and descriptive button text.
• Make buttons easy to click on mobile devices.
• Use CSS to provide clear hover and focus states.
• Do not use buttons only for decoration.
• Make sure important buttons are accessible using the keyboard.