HTML <button> Tag
Description
The HTML <button> element represents a clickable button. It is used to submit forms, trigger JavaScript actions, or create interactive UI elements.
Unlike the <input type="button"> element, the <button> element can contain rich content such as text, images, and icons, making it more flexible for interactive designs.
CSS Display:
inline-blockSyntax
<button type="button">Click Me</button>Popular Attributes
| Attribute | Description |
|---|---|
| type | Specifies the type of the element. Behavior changes based on the type value. |
| disabled | Disables the element, preventing user interaction and excluding it from form submission. |
| name | The name of the form control, used to identify the field when submitting form data. |
| value | The initial or current value of the element. |
| form | Associates the element with a form by the form's id, even if it is outside the form. |
This element also supports global HTML attributes such as class, id, style, data-*, and more.
Examples
Basic Button
<button type="button">Click Me</button>
A simple button with no default action. Use JavaScript to add functionality.
Submit Button
<form>
<input type="text" placeholder="Your name">
<button type="submit">Submit</button>
</form>
A submit button inside a form. Clicking it submits the form data.
Disabled Button
<button type="button" disabled>Not Available</button>
A disabled button cannot be clicked or focused. It appears grayed out by default.
Notes
Always specify the type attribute. Without it, a button inside a form defaults to type="submit", which may cause unintended form submissions.
Prefer <button> over <a> for actions (like opening a modal or toggling a menu). Use <a> only for navigation. This is important for both accessibility and semantics.