phpjsJqueryhtmlcssblog

Как сделать кнопку html скачать

Сколько способов существует создать "кнопку скачать в html", нарисуем и создадим кнопку "скачать"

Простые кнопки скачать/загрузить html

1. Простая кнопка скачать/загрузить html
2. Простая кнопка №2 скачать/загрузить 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>

Значок загрузить Будем использовать SVG


Изменить цвет картинки - ищем атрибут "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>

Результат: Download
Скачать кнопку в сборе, в архиве

Скопировать ссылку



Простая кнопка №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>


Download

Download
Скачать в сборе, в архиве

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---