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

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

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