Как сделать кнопку html скачать
Сколько способов существует создать "кнопку скачать в html", нарисуем и создадим кнопку "скачать"
Простые кнопки скачать/загрузить html
Простая кнопка скачать/загрузить html
Давайте сразу приступим к делу, нам понадобятся стили {style} для кнопки
Строка №3 - если требуется изменить задний фон.
Строка №5 - цвет текста, подбираем цветСтрока №7 - размер шрифта.
Строка №11 - цвет при наведении, подбираем цветСтрока №14 + 17 - цвет обводки при нажатии.
Css простой кнопки загрузить
<style>
button.button {
background-color: #ff0707;
border: none;
color: white;
padding: 12px 30px !important;
font-size: 16px !important;
cursor: pointer;
}
button.button:hover {
background-color: #ff4b4b !important;
}
button.button:active, button.button:focus {
outline-color: #d90202;
}
button.button::-moz-focus-inner {
outline-color: #d90202;
}
</style>
Изменить цвет картинки - ищем атрибут "fill"
Код кнопки html загрузить
<button class="button "><svg x="0px" y="0px" viewBox="0 -60 1000 1000" fill="white" width="20" height="20"><path d="M867.5,500H714.4L500,714.4L285.6,500H132.5L10,745v61.3h980V745L867.5,500z M10,867.5h980v61.3H10V867.5z M561.3,316.3v-245H438.8v245H224.4L500,591.9l275.6-275.6H561.3z"></path></svg> Download</button>
Простая кнопка №2 скачать/загрузить html
Следующая кнопка скачать аналогичная кнопке скачать в первом пункте, единственно для вывода картинки используем шрифты AWESOME.
Всё остальное под копирку, и изменил цвет, чтобы отличался от первого варианта.
Css кнопки скачать
/* стили для кнопок */
.btn {
background-color: DodgerBlue;
border: none;
color: white;
padding: 12px 30px;
font-size: 16px;
cursor: pointer;
}
/* Изменение цвета при наведении */
.btn:hover {
background-color: RoyalBlue;
}
/* Цвет обводки при нажатии */
button.btn:active, button.btn:focus {
outline-color: #333cff;
}
button.btn::-moz-focus-inner {
outline-color: #333cff;
}
Html код для кнопки скачать
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- автоматический размер -->
<button class="btn"><i class="fa fa-download"></i> Download</button>
<!-- 100% ширины -->
<button class="btn" style="width:100%"><i class="fa fa-download"></i> Download</button>
Скачать в сборе, в архиве
Этим вы очень поможете проекту! Заранее огромное спасибо!
