Миша

Вся магия в том, чтобы у ссылки, в атрибуте href, указать путь до файла вместе с раcширением (.pdf).
Если браузер не умеет открывать файлы такого типа, то он их просто скачает.
И да, ссылку можно стилизовать как кнопку.

<a href="путь_до_вашего_файла.pdf">

<a href="другой_путь_до_вашего_файла.pdf">

Если файл обязательно должен быть скачан, добавьте ссылке атрибут download.

<a href="путь_до_вашего_файла.pdf" download>

P.S. Спасибо @pm_wanderer за дополнение.

Самый важный и простой шаг — лечение дивянки использование html5 тегов для разметки страницы.

Вот здесь Вадим Макеев расскажет Вам, как и почему стоит использовать html5 теги.
А вот здесь Ричард Кларк расскажет Вам, как и почему не стоит использовать html5 теги.
А потом ещё можете прочитать вот эту статью, чтобы окончательно запутаться и уйти на бэк-энд.

Но если вам это интересно настолько, что вы понимаете, что между SEO и семантикой не очень-то много общего, то можете ещё почитать вот эти статьи.

Кстати, обязательно читайте комментарии к статьям, они тоже очень полезны.

P.S. После просмотра этих видео вы поймете, почему картинка под спойлером очень крутая.