Hoe te maken: waarschuwing knop

Hoe stijl van waarschuwing knop ontwerpen

Eerste stap - Voeg HTML toe:

<button class="btn success">Succes</button>
<button class="btn info">Informatie</button>
<button class="btn warning">Waarschuwing</button>
<button class="btn danger">Gevaar</button>
<button class="btn default">Standaard</button>

Tweede stap - Voeg CSS toe:

.btn {
  border: none; /* verwijder rand */
  kleur: wit; /* voeg tekstkleur toe */
  padding: 14px 28px; /* voeg wat inbuisruimte toe */
  cursor: pointer; /* voeg een muisaanwijzer toe bij hover */
}
.success {achtergrondkleur: #04AA6D;} /* groen */
.success:hover {achtergrondkleur: #46a049;}
.info {achtergrondkleur: #2196F3;} /* blauw */
.info:hover {achtergrond: #0b7dda;}
.warning {achtergrondkleur: #ff9800;} /* geel */
.warning:hover {achtergrond: #e68a00;}
.danger {achtergrondkleur: #f44336;} /* rood */
.danger:hover {achtergrond: #da190b;}
.default {achtergrondkleur: #e7e7e7; kleur: zwart;} /* grijs */
.default:hover {achtergrond: #ddd;}

Probeer het zelf

Gerelateerde pagina's

Handleiding:CSS knop