Как сделать кнопку скачать с помощью кода css

Здравствуйте, уважаемый читатель моего блога. Продолжаю тему о кнопках. В этой статье пойдет речь о том как сделать кнопку скачать с помощью кода css.

Вообще кнопки скачать очень распространены на сайтах с учебной тематикой, например. Или в интернет магазинах с большим количеством товара, отличающегося по параметрам. Ведь удобнее же прайс разместить для скачивания, нежели загружать файл ексель. Не каждый читатель будет дожидаться пока окрытия большого по объему файла ексель.

Будем делать кнопку скачать аналогично технологии, описанной в статье как сделать кнопку вверх для сайта.

Как сделать кнопку скачать с помощью кода css

1 этап.

Вставляем код кнопки скачать в нужное место статьи в текстовом режиме.

<a class="btn" href="http://vkpluss.ru/wp-content/uploads/2015/02/архив.zip">Нажмите на меня</a>

2 этап.

В файл style.css вставляем код.

.btn {
  background: #5dd934;
  background-image: -webkit-linear-gradient(top, #5dd934, #7fb82b);
  background-image: -moz-linear-gradient(top, #5dd934, #7fb82b);
  background-image: -ms-linear-gradient(top, #5dd934, #7fb82b);
  background-image: -o-linear-gradient(top, #5dd934, #7fb82b);
  background-image: linear-gradient(to bottom, #5dd934, #7fb82b);
  -webkit-border-radius: 28;
  -moz-border-radius: 28;
  border-radius: 28px;
  font-family: Courier New;
  color: #ffffff;
  font-size: 20px;
  padding: 10px 20px 10px 20px;
  text-decoration: none;
}

.btn:hover {
  background: #fc3cd6;
  background-image: -webkit-linear-gradient(top, #fc3cd6, #5656cc);
  background-image: -moz-linear-gradient(top, #fc3cd6, #5656cc);
  background-image: -ms-linear-gradient(top, #fc3cd6, #5656cc);
  background-image: -o-linear-gradient(top, #fc3cd6, #5656cc);
  background-image: linear-gradient(to bottom, #fc3cd6, #5656cc);
  text-decoration: none;
}

Получится вот такая кнопка, с подсветкой при нажатии.

Нажмите на меня
Как видите, сделать кнопку скачать с помощью кода css очень легко. Правда ведь?

Удачи!

P.S. Кнопки могут быть разными, разного цвета и размера, с тенью и без и другими изменениями. В следующей статье вы узнаете как можно менять эти свойства.

Возможно Вас также заинтересует:

Как сделать кнопки вверх вниз для сайта

Эта статья написана в продолжение статьи о том, как сделать кнопку вверх для сайта.

Увеличение изображения на сайте – очень простой способ

Конечно, способов увеличения изображений существует достаточно много. И в основном используются применения скриптов и плагинов. По-моему мнению такие методы оправданы в случае ресурсов с огромным ...

Как защитить текст от копирования. Часть 2.

Скрипт добавления ссылки на источник при копировании.Здравствуйте, уважаемый читатель. Столкнулась с проблемой копирования контента. Неприятно обнаружить свои труды на чужом сайте. Искала, искала способ, ...

Как добавить кнопки социальных сетей

В этой статье просто хочу поделиться скриптом, который устанавливается на сайт и в результате добавляются красивые кнопки социальных сетей, передвигающиеся вслед за просмотром. Вдруг кому-то ...

Как защитить доступ к файлу htaccess кодом

Существует немалое количество способов защитить свой .htaccess файл, ограничить к нему доступ посторонних людей, злоумышленников. Предлагаю вам защититься кодом.

Как сделать тень у текста за 5 минут

Здравствуйте, уважаемый читатель моего блога. В этой статье вы научитесь создавать за 5 минут с помощью стилей css и кода html тень текста. 

Как убрать автора поста wordpress

Данная статья посвящена теме как убрать автора в статье или на странице wordpress.  Причем, убирать автора вордпресс будем способом правки кода шаблона. 

Как защитить текст от копирования. Часть 1.

Блокировка правой кнопки мыши и выделения текста. Скрипт.Здравствуйте, уважаемый читатель. Столкнулась с проблемой копирования контента. Неприятно обнаружить свои труды на чужом сайте. Искала, искала ...