CSS Basis
Selectors
Geavanceerd
CSS Basis
Selectors
Geavanceerd

CSS Buttons

Met CSS kunnen buttons (knoppen) op verschillende manieren worden opgemaakt.

Stijlen van standaard buttons

VoorbeeldVoorbeeld: 
.button {
  background-color: #669EE2;
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}

CSS gekleurde buttons

Gebruik de eigenschap background-color om de achtergrondkleur van een knop te wijzigen:

VoorbeeldVoorbeeld: 
.button1 {background-color: #04AA6D;} /* Groen */
.button2 {background-color: #008CBA;} /* Blauw */
.button3 {background-color: #f44336;} /* Rood */
.button4 {background-color: #e7e7e7; color: black;} /* Grijs */
.button5 {background-color: #555555;} /* Zwart */

CSS button afmetingen

Gebruik de eigenschap font-size om de lettergrootte van een knop te wijzigen:

VoorbeeldVoorbeeld: 
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}

Gebruik de eigenschap padding om de ruimte tussen de knop te wijzigen:

VoorbeeldVoorbeeld: 
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 10px 16px;}
.button5 {padding: 16px;}

CSS afgeronde buttons

Gebruik de eigenschap border-radius om afgeronde hoeken aan een knop toe te voegen:

VoorbeeldVoorbeeld: 
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}

CSS gekleurde button randen

Gebruik de eigenschap border om een ​​gekleurde rand aan een knop toe te voegen:

VoorbeeldVoorbeeld: 
.button1 {
  background-color: white;
  color: black;
  border: 2px solid #04AA6D; /* Groen */
}

CSS muisover buttons

Gebruik de :hover selector om de stijl van een knop te wijzigen wanneer je de muis erover heen beweegt.

VoorbeeldVoorbeeld: 
.button {
  transition-duration: 0.4s;
}

.button:hover {
  background-color: #04AA6D; /* Groen */
  color: white;
}

Tip Met de transition-duration eigenschap kan je de snelheid van het "hover" effect bepalen.

CSS schaduw buttons

Je kunt een knop stijlen met de box-shadow eigenschap, door deze eigenchap te gebruiken kun je schaduwen aan een knop toe voegen:

VoorbeeldVoorbeeld: 
.button1 {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
}

.button2:hover {
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

CSS buttons uitschakelen

Door gebruik te maken van de opacity eigenschap kun je transparantie aan een knop toe voegen (creëert een "uitgeschakeld" uiterlijk).

VoorbeeldVoorbeeld: 
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

Tip Je kunt de cursor eigenschap met de waarde "not-allowed" gebruiken om de muisaanwijzer te veranderen in een verboden toegangs bordje wanneer je met de muis over de knop(button) beweegt.

CSS button breedte aanpassen



Standaard wordt de grootte van de knop bepaald door de tekstinhoud. Gebruik de eigenschap width om de breedte van een knop te wijzigen:

VoorbeeldVoorbeeld: 
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}

CSS buttons groeperen

Verwijder de marges door aan elke knop de eigenschap float: left; toe te voegen, zo maak je een knopgroep aan en plaats je deze naast elkaar.

VoorbeeldVoorbeeld: 
.button {
  float: left;
}

Randen toevoegen aan buttons

Gebruik de eigenschap border om randen toe te voegen aan een knopgroep:

VoorbeeldVoorbeeld: 
.button {
  float: left;
  border: 1px solid blue;
}

CSS buttons verticaal groeperen

Gebruik de eigenschap display: block; in plaats van float: left; om de knoppen onder elkaar te groeperen, in plaats van naast elkaar:

VoorbeeldVoorbeeld: 
.button {
  display: block;
}

CSS button op een afbeelding

Bos

CSS geanimeerde buttons

Hieronder zie je een aantal voorbeelden van geanimeerde knoppen (buttons):



Ad blocker gedetecteerd!
  Ons website heeft gedetecteerd dat u een Ad blocker gebruikt. Codecenter.nl is gratis, wij blijven overeind door het weergeven van advertenties en u kunt ons daarbij helpen. Het wordt aanbevolen om uw Ad blocker uit te schakelen zodat u verder gebruik kunt maken van codecenter.nl, alvast bedankt.