Как создать: кнопка для скачивания

Узнайте, как использовать CSS для настройки стиля кнопки для скачивания.

Автоматическая ширина:

Полная ширина:

Попробуйте сами

Как создать кнопку для скачивания

Шаг 1 - Добавление HTML:

Добавьте библиотеку иконок, например Font Awesome, и добавьте иконки к 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>
/* Полная ширина */
<button class="btn" style="width:100%"><i class="fa fa-download"></i> Download</button>

Шаг 2 - Добавление CSS:

/* Настройка стиля кнопки */
.btn {
  background-color: DodgerBlue;
  border: none;
  color: white;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 20px;
}
/* Мышь наведена на фон, становится тёмнее */
.btn:hover {
  background-color: RoyalBlue;
}

Попробуйте сами

Соответствующие страницы

Урок:Уроки иконок

Урок:Кнопки CSS