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

Размещено в 21:35h in Opencart, Wordpress, Вёрстка html, css, Фронтенд by

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

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

При наличии атрибута ``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!

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

Написать