It’s always a good idea to have your html semantics right especially for accessibility. One of the most common accessibility mistakes is to style a link to look like a button. Bootstrap is a great tool in order to get a project up and running without getting too many CSS rules in the way of your thinking, but sometimes it makes it too easy to mix up semantics:

<a href="#" class="btn btn-primary">

Although this would indeed look like a nicely styled button, this code could confuse screen reader users. Links are expected to be triggered by the Enter key, while buttons are expected to be triggered by the Space key. This can be altered with some javascript, but why not save a bunch of time and do it correctly in the first place?

Now, consider these examples:

<input type="submit"/>
<input type="button" value="Submit/>
<button>Submit</button>

When contained inside a form element, they should all provide the same functionality of submitting the form, but the last example allows content. For example, we can make an image act like a button:

<button>
   <img src="http://placeholder.image.com/image.jpg"/>
</button>

Sometimes we don’t want to have the boring default button style that can be inconsistent with the rest of our UI. Good thing we have CSS to style buttons:

button {
   background-color: transparent;
   border: none;
   color: "red";
}