Как создать: иконка кнопки

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

Иконка кнопки:

Иконка кнопки с текстом:

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

Как создать иконку кнопки

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

Добавление библиотеки иконок, например Font Awesome, и attaching andконки к HTML кнопкам:

<!-- Добавление библиотеки иконок -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- Добавление иконок Font Awesome к кнопкам -->
<p>Кнопки с иконками:</p>
<button class="btn"><i class="fa fa-home"></i></button>
<button class="btn"><i class="fa fa-bars"></i></button>
<button class="btn"><i class="fa fa-trash"></i></button>
<button class="btn"><i class="fa fa-close"></i></button>
<button class="btn"><i class="fa fa-folder"></i></button>
<p>Кнопки с иконками и текстом:</p>
<button class="btn"><i class="fa fa-home"></i> Home</button>
<button class="btn"><i class="fa fa-bars"></i> Menu</button>
<button class="btn"><i class="fa fa-trash"></i> Trash</button>
<button class="btn"><i class="fa fa-close"></i> Close</button>
<button class="btn"><i class="fa fa-folder"></i> Folder</button>

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

/* Настройка стиля кнопки */
.btn {
  background-color: DodgerBlue; /* Синий фон */
  border: none; /* Удаление рамки */
  color: white; /* Белый текст */
  padding: 12px 16px; /* Некоторое внутреннее поле */
  font-size: 16px; /* Установка размера шрифта */
  cursor: pointer; /* Индикатор мыши при наведении мыши на кнопку */
}
/* При наведении мыши на кнопку изменяется цвет фона */
.btn:hover {
  background-color: RoyalBlue;
}

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

Связанные страницы

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

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