HTML Buttons

Buttons let users interact with your web page. They can submit forms, trigger actions, or run JavaScript code when clicked. Buttons are everywhere on the web.

HTML Button Element

The <button> tag creates a clickable button. By itself, the button does nothing. You need to add an action to make it useful.

By default, buttons look a bit plain. But you can style them to look however you want. Notice the margin between each button so they do not touch each other.

Styling HTML Buttons with CSS

Buttons are easy to style with CSS. You can change their background color, text color, size, border, and more. The example below also includes proper spacing and mobile responsiveness.

Notice the hover effect? When you move your mouse over the green button, it gets darker. That is the :hover CSS pseudo-class. On mobile screens, the buttons stack vertically and take full width for easier tapping.

Disabled Buttons

You can make a button unclickable using the disabled attribute. Disabled buttons usually appear faded or grayed out.

Try clicking the disabled button. Nothing happens. That is the purpose of the disabled attribute.

Button with JavaScript (onclick)

You can run JavaScript when a button is clicked using the onclick attribute. This is where buttons become really useful.

The alert() function creates a popup message. This is a simple way to make your button do something visible.

Button Types

The type attribute tells the browser what the button is supposed to do. There are three button types:

• type="button" – A normal clickable button (does nothing by default)
• type="submit" – Submits a form (sends data to a server)
• type="reset" – Resets all form fields back to their original values

Buttons Inside Forms

Buttons are often used inside forms. A submit button sends the form data. A reset button clears all the fields.

Button vs Link (When to Use Which)

Beginners often wonder: when should I use a button and when should I use a link?

• Use links (<a>) for navigation. “Go to the about page”, “Back to home”, “Read more” (if it goes to another page).
• Use buttons (<button>) for actions. “Submit”, “Save”, “Delete”, “Buy now”, “Show more” (if it shows hidden content on the same page).

A good rule of thumb: if it changes the URL, use a link. If it does something on the current page, use a button.

Quick Summary

• Use <button> to create a clickable button.
• Add margin: 5px 8px; to space buttons apart so they do not touch.
• Use CSS media queries to make buttons stack vertically on mobile screens.
• Use CSS to style buttons with colors, padding, borders, and hover effects.
• Use the disabled attribute to make a button unclickable.
• Use onclick to run JavaScript when a button is clicked.
• Always specify the type attribute (button, submit, or reset).
• Submit buttons send form data. Reset buttons clear form fields.
• Use links for navigation. Use buttons for actions.

What Just Happened? Let Me Explain

• Buttons are one of the most common elements on the web. Every time you submit a form, buy a product, or close a popup, you are clicking a button.
• Adding margin to buttons prevents them from touching each other, which looks better and makes them easier to tap on mobile.
• Using display: block; width: 100%; on mobile makes buttons full width and stack vertically for easier tapping with thumbs.
• A button with no type inside a form defaults to “submit”. That can cause unexpected form submissions. So always write type="button" for normal buttons.
• The onclick attribute is just one way to make buttons interactive. You will learn more about JavaScript events later.

HTML Button Reference

Here are the tags and attributes we covered in this chapter: