Как создать: иконка кнопки
- Предыдущая страница Кнопка уведомлений
- Следующая страница Кнопки "Следующая страница/Предыдущая страница"
Узнайте, как использовать 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
- Предыдущая страница Кнопка уведомлений
- Следующая страница Кнопки "Следующая страница/Предыдущая страница"