The HTML <button> Element

The <button> element creates a clickable button that can trigger actions on a webpage. Buttons can submit forms, trigger JavaScript functions, or perform other interactive tasks. Unlike <input type="button">, the <button> element can contain HTML content (text, images, etc.) and offers more styling flexibility.

Basic Button Examples

Here are simple examples of how to use the <button> element:

1. Simple Button

A basic button with text content:

2. Button with Icon

A button containing both text and an icon (using UTF8 Icons in this example):

3. Disabled Button

A button that is disabled and cannot be clicked:

Buttons with JavaScript

These examples demonstrate buttons that trigger JavaScript functions:

4. Button with Click Event

A button that shows an alert when clicked:

5. Button that Changes Content

A button that modifies the page content when clicked:

Button Attributes

Here are some important attributes for the <button> element:

Best Practices

• Always specify the type attribute (button, submit, or reset)
• Provide meaningful text or labels for buttons
• Use ARIA attributes when needed for accessibility
• Style buttons consistently throughout your application
• Ensure buttons have sufficient size for easy interaction