Как сделать кнопку скачать с помощью кода 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. Кнопки могут быть разными, разного цвета и размера, с тенью и без и другими изменениями. В следующей статье вы узнаете как можно менять эти свойства.

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

Хлебные крошки на сайте wordpress

Хлебные крошки на сайте - что это и как сделать? 

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

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

Вывод php кода в блоге на WordPress

Эта тема, наверно, будет интересна для веб мастеров, которым надо в запись вставить php код. 

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

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

Как убрать запись с главной страницы с помощью кода

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

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

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

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

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

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

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