1. A basic clickable button

<button type="button">Click me</button>

The type="button" tells the browser this is a plain action button, not a form-submitting one. Setting the type avoids surprises when the button sits inside a form.

2. A button that submits a form

<form>
  <input type="text" name="email">
  <button type="submit">Sign up</button>
</form>

Inside a form, type="submit" sends the form data when clicked.

3. A button that runs JavaScript

<button type="button" onclick="greet()">Greet</button>

The onclick attribute runs code when the button is pressed. For larger projects, attach the handler in your script instead of inline.

4. A link styled as a button

If you need to navigate to another page, use a link, not a button.

<a href="signup.html" class="btn">Sign up</a>

Then style the .btn class with CSS so the link looks like a button.

Which element should you use?

  • <button type="button"> — for an action on the same page.
  • <button type="submit"> — to submit a form.
  • <a class="btn"> — to send the user to another page.

Frequently asked questions

What is the difference between a button and a link?

A <button> performs an action on the current page, like submitting a form or running code. An <a> link takes the user somewhere else. Use the one that matches the intent.

Why does my button reload the page?

Because it defaults to type="submit" inside a form. Set type="button" to stop it from submitting and reloading.

Want to understand the markup behind this? Work through our free HTML & CSS course.