Контакты
  • evgenylebedevv@gmail.com
  • +7 960 255 15 53
  • L.E.V.rus
Сайт Веб-Студии Евгения Лебедева | Кнопка Download
Кнопка на CSS с атрибутом Download для скачивания документов
Кнопка, CSS, атрибутом, Download, для, скачивания, документов,
15978
post-template-default,single,single-post,postid-15978,single-format-standard,ajax_fade,page_not_loaded,,qode-title-hidden,side_area_uncovered_from_content,columns-4,qode-theme-ver-10.1.1,wpb-js-composer js-comp-ver-4.12,vc_responsive

Кнопка на 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>
Поделись, если оказалось полезно :)
Нет Комментариев

Написать комментарий