Jak utworzyć: przycisk ostrzegawczy

Jak zaprojektować styl przycisku ostrzegawczego

Krok 1 - Dodaj HTML:

<button class="btn success">Sukces</button>
<button class="btn info">Informacja</button>
<button class="btn warning">Ostrzeżenie</button>
<button class="btn danger">Niebezpieczny</button>
<button class="btn default">Domyślny</button>

Krok 2 - Dodaj CSS:

.btn {
  border: none; /* usuń obramowanie */
  color: white; /* dodaj kolor tekstu */
  padding: 14px 28px; /* dodaj nieco wewnętrznej przestrzeni */
  cursor: pointer; /* dodaj kursor myszy podczas nawigacji */
}
.success {background-color: #04AA6D;} /* zielony */
.success:hover {background-color: #46a049;}
.info {background-color: #2196F3;} /* niebieski */
.info:hover {background: #0b7dda;}
.warning {background-color: #ff9800;} /* pomarańczowy */
.warning:hover {background: #e68a00;}
.danger {background-color: #f44336;} /* czerwony */
.danger:hover {background: #da190b;}
.default {background-color: #e7e7e7; color: black;} /* szary */
.default:hover {background: #ddd;}

Spróbuj sam

Strony związane

Tutorial:Przycisk CSS