Как сделать - Кнопки оповещения
Узнать, как стилизовать кнопки "оповещения" с помощью CSS.
Кнопки оповещения
Редактор кода »
Создать кнопки оповещения
Шаг 1) Добавить HTML:
Пример
<button class="btn success">Успех</button>
<button class="btn info">Информация</button>
<button class="btn warning">Предупреждение</button>
<button class="btn danger">Опасность</button>
<button class="btn default">По умолчанию</button>Шаг 2) Добавить CSS:
Пример
.btn {
border: none; /* Удалить границы */
color: white; /* Добавить цвет текста */
padding: 14px 28px; /* Добавить немного отступов */
cursor: pointer; /* Добавить курсор указателя мыши - над */
}
.success {background-color: #4CAF50;} /* Зеленый */
.success:hover {background-color: #46a049;}
.info {background-color: #2196F3;} /* Синий */
.info:hover {background: #0b7dda;}
.warning {background-color: #ff9800;} /* Оранжевый */
.warning:hover {background: #e68a00;}
.danger {background-color: #f44336;} /* Красный */
.danger:hover {background: #da190b;}
.default {background-color: #e7e7e7; color: black;} /* Серый */
.default:hover {background: #ddd;}Редактор кода »Зайдите на наш учебник CSS Кнопки, чтобы узнать больше о том, как стилизовать кнопки.
