HTML Tutorial: Complete HTML Tutorial
About Lesson

HTML <button> Tag


Concept

The HTML <button> tag is used to create clickable buttons within a web page. These buttons can be styled using CSS and can perform various actions when clicked, such as submitting a form or triggering a JavaScript function.

Implementation

Example 1: Basic Button

A simple clickable button can be created as follows:

<button>Click on Me!</button>
Example 2: Button with CSS Styling

You can use CSS to style buttons, including adding hover effects:

<!DOCTYPE html>
<html>
<head>
<style>
.button {
  background-color: blue;
  color: white;
  padding: 10px;
  border: none;
  cursor: pointer;
  font-size: 16px;
}

.button:hover {
  background-color: lightblue;
}
</style>
</head>
<body>

<button class="button">Blue</button>

</body>
</html>

Try it out below

Loading

Attributes

The following table lists the attributes that can be used with the <button> tag:

Attribute Value Description
autofocus autofocus Specifies that a button should automatically get focus when the page loads.
disabled disabled Specifies that a button should be disabled.
form form_id Specifies which form the button belongs to.
formaction URL Specifies where to send the form-data when a form is submitted. Only for type=”submit”.
formenctype application/x-www-form-urlencoded
multipart/form-data
text/plain
Specifies how form-data should be encoded before sending it to a server. Only for type=”submit”.
formmethod get/post Method Specifies how to send the form-data (which HTTP method to use). Only for type=”submit”.
formnovalidate formnovalidate Specifies that the form-data should not be validated on submission. Only for type=”submit”.
formtarget

-blank

-self

-parent

-top

framename

Specifies where to display the response after submitting the form. Only for type=”submit”.
name name Specifies a name for the button.
type

button

reset

submit

Specifies the type of button.
value text Specifies an initial value for the button.

Global Attributes

The <button> tag also supports the Global Attributes in HTML.

Event Attributes

The <button> tag also supports the Event Attributes in HTML.

Browser Support

Element Chrome Firefox Safari IE Edge
<button> Yes Yes Yes Yes Yes

More Examples

You can further explore styling buttons with CSS and adding hover effects in the examples provided below.


This example demonstrates creating two buttons with different styles and hover effects. The CSS code defines the styles for the buttons, including their appearance, size, and transition effects.

Loading

In this example, two buttons are styled with different colors and hover effects. The .button-green class styles the first button with a green border and changes the background color to green when hovered over. Similarly, the .button-blue class styles the second button with a blue border and changes the background color to blue when hovered over.

The use of the transition-duration property ensures a smooth transition effect when the mouse is moved over the buttons.

Conclusion

The <button> tag is a versatile and essential part of HTML, allowing developers to create interactive and engaging user interfaces.


By combining it with CSS and JavaScript, you can create buttons that not only look appealing but also perform various functions, enhancing the overall user experience.