When To Use The Button Element

You use it when, you want a button on your page that users can click, right? Well, unfortunately it's a bit more complicated than that. 
It's not too bad though, let's figure it out.

It look like this :-
<button>Do something</button>
What the most common result of clicking something on a website? Moving to a new URL, like you would clicking a link ( an <a href="#"></a> ) elements.

The <button> element, by itself can't do that.

Button is a Form Element

<form>

    <input type="submit" value="submit">

</form>

A <button> element in a <form>, by default, behaves identically to that submit input above.

<form>

    <button>Submit</button>

    <button type="reset">Reset</button>

</form>

Button can have content

<button>

  <img src="xyz.png" alt="submit">

  Submit

</button>

<button> feels better anyway

Warning: Be careful when marking up links with the button role. Buttons are expected to be triggered using the Space key, while links are expected to be triggered through the Enter key. In other words,  when links are used to behave like buttons, adding role="button" alone is not sufficient. It will also be necessary to add a key event handler that listens for the Space key in order to be consistent with native buttons.