Как сделать ссылку в виде кнопки

Короткий ответ

Сделайте ссылку строчно-блочной, задайте отступы и фон и уберите подчёркивание:

<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 нужен, чтобы вертикальные отступы раздвигали соседние строки, а не наезжали на них.

Ссылка и кнопка одинаково

Часто ссылка и настоящая кнопка стоят рядом, и выглядеть они должны одинаково. Сбросьте у кнопки шрифт и рамку и дайте обоим один класс:

<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>

Что выбрать

Ссылка <a> ведёт на другую страницу или в другое место этой страницы. Кнопка <button> выполняет действие: отправляет форму, открывает окно, добавляет товар в корзину. Внешний вид тут ни при чём — выбирайте тег по тому, что произойдёт после щелчка.

Частая ошибка

Вместо ссылки ставят <div> с обработчиком щелчка. Такой «кнопки» нет в порядке перехода по Tab, её нельзя нажать Enter и открыть в новой вкладке. Для перехода всегда используйте <a href>.