

Как сделать кнопку скачать с помощью кода 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. Кнопки могут быть разными, разного цвета и размера, с тенью и без и другими изменениями. В следующей статье вы узнаете как можно менять эти свойства.
http://vkpluss.ru/skripty/kak-sdelat-knopku-skachat-2.htmlСкрипты и кодыкак сделать кнопку скачать
Красивая кнопка вверху
приятная 😉
Отличная кнопка. Хотелось бы получить от вас урок еще и с иcпользованием JQuery анимации. Можете закинуть кнопку на Github
Вообще то я предпочитаю более легкие пути, а это уже посложнее
Красивая кнопка с листочками в начале статьи. И способ действительно простой.
Спасибо за статью. Было интересно почитать!
Спасибо, Степка, за комментарий!