Кнопка на CSS с атрибутом Download для скачивания документов

Как сделать кнопку для скачивания документов без их предварительного архивирования?

Бывает нужно выложить документ на сайте для скачивания не запаковывая его в архив, но в этом случае браузер просто откроет его в новом окне.
Пример кнопки:
Скачать что-нибудь

При наличии атрибута ``download`` браузер не переходит по ссылке, а предложит скачать документ, указанный в адресе ссылки.
Стили кнопки download:
<style>
a.button7 {
font-weight: 700;
color: white;
text-decoration: none;
padding: .8em 1em calc(.8em + 3px);
border-radius: 3px;
background: rgb(26,188,156);
box-shadow: 0 -3px rgb(50,141,123) inset;
transition: 0.2s;
}
a.button7:hover {
color: white;
background: rgb(50, 141, 123); }
a.button7:active {
background: rgb(8,122,100);
box-shadow: 0 3px rgb(8,122,100) inset;
}
</style>

Код кнопки для вставки на страницу с атрибутом «download»:

<a href="ссылка" download="" class="button7">Скачать</a>

Если размещать несколько кнопок рядом, то они могут слипаться друг с другом так как тег <a> это строчный элемент и padding и margin тут не помогут, нужно обернуть кнопку в <div> и сделать отступы например с таким классом:

.button7_div {
margin: 5px;
padding: 5px;
}

Если ещё подключить иконки FontAwesome, то в итоге получим что-то вроде этого:

<div class="button7_div"><a class="button7" href="ссылка скачивания" download=""><i class="fa fa-download"></i>  Надпись кнопки</a></div>

Enjoy!

Поделись, если оказалось полезно :)
Нет комментариев

Написать