How to make a link look like a button

Short answer

Make the link inline-block, set padding and a background, and remove the underline:

<style>
  .btn-link { display: inline-block; padding: 10px 20px; border-radius: 8px; background: seagreen; color: white; text-decoration: none; }
  .btn-link:hover { background: darkgreen; }
</style>
 
<a class="btn-link" href="#">Sign up</a>

display: inline-block makes the vertical padding push the neighboring lines apart instead of overlapping them.

A link and a button alike

A link and a real button often stand side by side and must look the same. Reset the button font and border and give both one class:

<style>
  .btn { display: inline-block; padding: 10px 20px; border: 0; border-radius: 8px; background: steelblue; color: white; font: inherit; text-decoration: none; cursor: pointer; }
</style>
 
<a class="btn" href="#">Read more</a>
<button class="btn">Subscribe</button>

Which one to choose

A link <a> leads to another page or another place on this page. A <button> performs an action: submits a form, opens a dialog, adds an item to the cart. The look does not matter — choose the tag by what happens after the click.

Common mistake

A <div> with a click handler is used instead of a link. Such a "button" is not in the Tab order, cannot be pressed with Enter and cannot be opened in a new tab. For navigation always use <a href>.