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

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

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

Убираем с главной страницы и RSS записи рубрики
Продолжаем улучшать функционал и внешний вид сайта. Убираем ненужные записи с главной страницы и RSS.   
Увеличение изображения на сайте – очень простой способ
Конечно, способов увеличения изображений существует достаточно много. И в основном используются применения скриптов и плагинов. По-моему мнению такие методы оправданы в случае ресурсов с огромным ...
Хлебные крошки на сайте wordpress
Хлебные крошки на сайте - что это и как сделать? 
Как сделать тень у текста за 5 минут
Здравствуйте, уважаемый читатель моего блога. В этой статье вы научитесь создавать за 5 минут с помощью стилей css и кода html тень текста. 
Как сделать кнопки вверх вниз для сайта
Эта статья написана в продолжение статьи о том, как сделать кнопку вверх для сайта.
Как добавить кнопки социальных сетей
В этой статье просто хочу поделиться скриптом, который устанавливается на сайт и в результате добавляются красивые кнопки социальных сетей, передвигающиеся вслед за просмотром. Вдруг кому-то ...
Как убрать автора поста wordpress
Данная статья посвящена теме как убрать автора в статье или на странице wordpress.  Причем, убирать автора вордпресс будем способом правки кода шаблона. 
Вывод php кода в блоге на WordPress
Эта тема, наверно, будет интересна для веб мастеров, которым надо в запись вставить php код.