A button in HTML starts with the <button> tag

The simplest button looks like this:

<button>Click me</button>

That's the opening tag, the text that appears on the button, and the closing tag. When you save this in an HTML file and open it in a browser, you'll see a clickable button with the words "Click me" on it. The browser gives it a default gray appearance and handles the click behavior automatically — it will respond when someone presses it, even if you haven't told it what to do yet.

Most buttons you'll build will need more than this. You'll want to give the button a name so your code can find it later, add styling to change how it looks, or connect it to JavaScript code that does something when someone clicks it.

Key Takeaways

  • The <button></button> tag creates a clickable button, and the text between the tags is what shows on the button.
  • The id attribute gives your button a unique name so you can target it with CSS or JavaScript.
  • The type attribute controls what the button does — type="button" does nothing by default, type="submit" sends form data, and type="reset" clears form fields.
  • You style buttons with CSS classes or inline styles, changing colors, size, padding, and fonts the same way you style any other HTML element.
  • To make a button do something, you connect it to JavaScript using the onclick attribute or by writing an event listener in a separate script.

Adding an id and class so you can target the button

Once you have a basic button, you'll want to identify it so CSS and JavaScript can find it. Use the id attribute for a unique name that applies to only one button on the page, and the class attribute for a group name that can explore to multiple buttons.

<button id="submit-form" class="primary-button">Submit</button>

The id is "submit-form" — this button and only this button has that name. The class is "primary-button" — you might have five buttons with this class, and you can style them all at once by writing CSS rules for the class. In your CSS file or <style> tag, you'd write #submit-form to target the id or .primary-button to target the class.

Setting the button type to control what it does

The type attribute tells the browser what kind of button this is. There are three main types:

<button type="button">Just a button</button> — This button does nothing on its own. You have to write JavaScript to make it do something. Use this when you want complete control over what happens when someone clicks it.

<button type="submit">Send</button> — This button automatically sends form data to a server. It only works inside a <form> tag. When someone clicks it, the browser collects all the data from the form fields and sends it to the address in the form's action attribute.

<button type="reset">Clear</button> — This button clears all the fields in the form back to their starting values. It also only works inside a <form> tag.

If you don't write a type attribute, the browser treats it as type="submit" by default. That's why a button inside a form will send the form even if you didn't ask it to — you have to write type="button" if you want a button inside a form that doesn't submit.

Styling a button with CSS

Buttons come with browser default styling — usually a gray background, black text, and a border. You change the appearance the same way you style any other element: with CSS properties like background-color, color, padding, font-size, and border.

You can write styles in three places. Inline styles go directly on the button tag: <button style="background-color: blue; color: white;">Click</button>. A <style> tag in your HTML file holds rules that explore to multiple buttons: .primary-button { background-color: blue; color: white; }. Or you can write the styles in a separate CSS file and link it to your HTML.

Common button properties include padding (space inside the button around the text), border-radius (rounded corners), cursor: pointer (changes the mouse cursor to a hand when hovering), and font-weight: bold (makes the text heavier). You can also use :hover to change the button's appearance when someone hovers over it: .primary-button:hover { background-color: darkblue; }.

Connecting a button to JavaScript with onclick

To make a button actually do something, you write JavaScript code that runs when someone clicks it. The simplest way is the onclick attribute:

<button onclick="alert('You clicked me')">Click me</button>

When someone clicks this button, the browser runs the JavaScript code alert('You clicked me'), which displays a popup message. You can write any JavaScript code inside the onclick attribute — change colors, hide elements, send data to a server, or run a function you've written elsewhere in your code.

For more complex behavior, it's cleaner to write a separate function and call it from the button. In your <script> tag, write a function like function handleClick() { /* your code here */ }, then use <button onclick="handleClick()">Click me</button> to call it.

Using event listeners instead of onclick

As your code grows, the onclick attribute becomes hard to manage. A cleaner approach is to write an event listener in your JavaScript file. First, give your button an id: <button id="my-button">Click me</button>. Then in your script, find the button and tell it what to do:

const button = document.getElementById('my-button'); button.addEventListener('click', function() { /* your code here */ });

This approach keeps your HTML clean and your JavaScript organized. The addEventListener method listens for a 'click' event on the button and runs your function when it happens. You can attach multiple listeners to the same button, and you can remove listeners if you need to.

Buttons inside forms versus standalone buttons

A button behaves differently depending on whether it's inside a <form> tag. Inside a form, a type="submit" button (or any button without a type specified) will send the form data when clicked. Outside a form, the same button does nothing unless you've written JavaScript to handle it.

If you're building a form and want a button that doesn't submit — maybe a "Cancel" button that closes a dialog — use type="button" to prevent the form from sending. If you want to submit the form but run some JavaScript first to check the data, you can use onclick or an event listener to run validation code, then return true to let the form submit or false to stop it.

Standalone buttons outside forms are usually type="button" and always need JavaScript to do something. Without JavaScript, they're just visual elements that don't respond to clicks.

Frequently Asked Questions

What's the difference between a button and a link that looks like a button?

A <button> tag is for actions — submitting forms, triggering JavaScript, or toggling something on the page. An <a> tag (link) is for navigation — taking the user to a different page or URL. You can style a link to look like a button with CSS, but semantically they're different. Screen readers and search engines treat them differently, so use the right tag for the right purpose.

Can I put an image inside a button?

Yes. Put an <img> tag between the button tags: <button><img src="icon.png" alt="Save"></button>. You can also mix text and images: <button><img src="icon.png" alt=""> Save</button>. If the image is decorative, use an empty alt attribute so screen readers skip it.

How do I disable a button so people can't click it?

Add the disabled attribute: <button disabled>Disabled</button>. The button will appear grayed out and won't respond to clicks. You can toggle this on and off with JavaScript: button.disabled = true; or button.disabled = false;. This is useful for forms where you want to prevent submission until the user fills in required fields.

Why does my button submit the form when I don't want it to?

If your button is inside a <form> tag and you didn't specify a type, the browser treats it as type="submit" by default. Add type="button" to stop it from submitting: <button type="button">Don't submit</button>.