HTML Buttons
In this page:
The button Tag
The button tag defines an interactive, clickable button on your webpage. Inside this container element, you can place text, icons, or images to customize how your button looks.
Note: Always specify an explicit type attribute on every button to prevent unexpected browser behaviors.
Warning: The button tag is not self-closing; you must write a closing tag, even if your button contains only an icon.
Example: The button Tag
<button>Click me</button>Defining Button Types
You can define three distinct button types using the type attribute: submit (which packages and sends form data), reset (which clears all fields), and button (which triggers custom JavaScript actions).
Note: Use type="button" for buttons that trigger custom scripts to prevent the page from reloading.
Warning: If you do not specify a type attribute, browsers will treat the button as a submit button by default inside forms.
Example: Defining Button Types
<button type="submit">Submit</button>
<button type="reset">Reset</button>
<button type="button">Run Script</button>Disabling Buttons
You can temporarily lock or disable a button by adding the disabled attribute to its opening tag. This grays out the button, prevents user clicks, and blocks any associated script triggers.
Note: Use the disabled attribute to prevent users from clicking a submit button multiple times while their file is uploading.
Warning: Disabled buttons are completely ignored during keyboard navigation, so users cannot focus on them using the Tab key.
Example: Disabling Buttons
<button disabled>Uploading...</button>Styling Buttons with CSS
Browsers render buttons with boxy, outdated default styles. You can easily customize their borders, background colors, padding, and hover states using standard CSS properties.
Note: Add custom hover and active states to your button styles to make them feel highly responsive on click.
Warning: Never use CSS outline: none to hide browser focus outlines without replacing them with custom focus styles.
Example: Styling Buttons with CSS
<button style="background-color: blue; color: white; padding: 10px; border: none;">
Styled Button
</button>Accessible Button Labels
If your button contains only an icon (like a trash can or a pencil symbol) without any visible text, screen readers will find it difficult to interpret. You must include a descriptive aria-label attribute to tell visually impaired users what the button does.
Note: Always add an aria-label to describe the action of any icon-only button.
Warning: Failing to add accessibility labels can make your interactive menus completely unusable for screen-reader users.
Example: Accessible Button Labels
<button aria-label="Delete item">🗑</button>- Omitting explicit type attributes on button tags, causing unexpected form submissions.
- Attempting to write closing button tags as self-closing tags.
- Hiding browser focus outlines using CSS (outline: none) without replacing them with custom focus styles.
- The button tag defines an interactive, clickable button on your webpage.
- Specify button types using the type attribute: submit for form submissions, reset to clear fields, or button for custom JavaScript actions.
- Style buttons with CSS for a responsive design, and always include descriptive aria-labels on icon-only buttons for accessibility.
Standard button tags and core attributes are natively supported by all web browsers.
Chapter Quiz — Complete all 12 topics to unlock
0/12 topics done
Complete these topics first: