JSFiddle - React, Tailwind, and code Playground

by adonis11

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>

CSS

.btn {
    border: none; /* Убирает рамки */
    color: #fff; /* Цвет текста на кнопке */
    padding: 12px 26px; /* Добавляет некоторые отступы */
    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;
}