Ярлыки состояния

  alexei 11/04/2022 - 09:50

Здесь вы узнаете, как сделать ярлыки состояния при помощи CSS.


Success  Info  Warning  Danger  Other

Как сделать ярлыки состояния

Шаг 1) Добавляем HTML:


<span class="label success">Success</span>
<span class="label info">Info</span>
<span class="label warning">Warning</span>
<span class="label danger">Danger</span>
<span class="label other">Other</span>

Шаг 2) Добавляем CSS:


.label {
  color: white;
  padding: 8px;
}

.success {background-color: #04AA6D;} /* Зеленый */
.info {background-color: #2196F3;} /* Синий */
.warning {background-color: #ff9800;} /* Оранжевый */
.danger {background-color: #f44336;} /* Красный */
.other {background-color: #e7e7e7; color: black;} /* Серый */