Hoe je ze maakt: randknoppen

Previous page Warning button
Next page Split button

Leer hoe je de stijl van randknoppen met CSS instelt.

Hoe je de stijl van randknoppen ontwerpt

Stap 1 - 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>

Stap 2 - Voeg CSS toe:

.btn {
  border: 2px vast zwart;
  achtergrondkleur: wit;
  kleur: zwart;
  uitsteek: 14px 28px;
  lettergrootte: 16px;
  cursor: pointer;

/* Groen */
.success {
  border-kleur: #04AA6D;
  kleur: groen;

.success:hover {
  achtergrondkleur: #04AA6D;
  kleur: wit;

/* Blauw */
.info {
  border-kleur: #2196F3;
  kleur: dodgerblauw

.info:hover {
  background: #2196F3;
  kleur: wit;

/* Oranje */
.warning {
  border-kleur: #ff9800;
  kleur: oranje;

.warning:hover {
  background: #ff9800;
  kleur: wit;

/* Rood */
.danger {
  border-kleur: #f44336;
  kleur: rood

.danger:hover {
  background: #f44336;
  kleur: wit;

/* Grijs */
.default {
  border-kleur: #e7e7e7;
  kleur: zwart;

.default:hover {
  background: #e7e7e7;

Try it yourself

toevoegen border-radius Eigenschappen om ronde hoekknoppen te maken: