Всех друзей поздравляем с Новым годом! Всего вам самого наилучшего! Всех благ, здоровья а материальное приложится!
СКРИПТЫ althtmlcssphpjsblog

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

Поддержи проект!!! smile

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

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

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

    Результат:

    Скачать кнопку в сборе, в архиве

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




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


Вас может еще заинтересовать список тем : #CSS | #DOWNLOAD |
Последняя дата редактирования : 10.01.2021 13:34
//dwweb.ru/comments_1_5/include/img/hand_no_foto.png
no
no
Еще никто не прокомментировал! COMMENTS+   BBcode
аватар
🞨
Загрузить свой аватар
(max ширина, высота = 200px)

Подписаться + =
Теги:
кнопка скачать html кнопка скачать файл html +как сделать кнопку скачать в html кнопка скачать html код кнопки для сайта

Последние комментарии :
Марат :
19/01/2021 01:13
Всегда пожалуйста!Приходите ещё!
подробнее.
аркадий :
19/01/2021 01:08
Спасибо!Меню вернулось. Класс!
подробнее.
Прохожий :
02/01/2021 10:44
Здравствуйте Марат!Спасибо Вам, за оперативность и развернутый ответ с примерами. И ОГРОМНОЕ спасибо, что…
подробнее.
Марат :
01/01/2021 03:30
И вас с Новым годом!Посмотрите …
подробнее.
Прохожий :
31/12/2020 03:58
А как проверить, чекнут ли чекбокс программно, то есть - другим скриптом, а не мышкой?Вот тут…
подробнее.