CSS knoppen

Leer hoe je CSS gebruikt om knopstijlen in te stellen.

Basisstijl van de knop

Voorbeeld

.button {
  achtergrondkleur: #4CAF50; /* Groen */
  border: none;
  kleur: wit;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Probeer het zelf

Knopkleur

Gebruik background-color Eigenschap wijzigen van de achtergrondkleur van de knop:

Voorbeeld

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

Probeer het zelf

Knopmaat

Gebruik font-size Eigenschap wijzigen van de lettergrootte van de knop:

Voorbeeld

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

Probeer het zelf

Gebruik padding Eigenschap wijzigen van de binnenste afstand van de knop:

Voorbeeld

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

Probeer het zelf

Ronde knoppen

Gebruik border-radius Eigenschap voor het toevoegen van ronde hoeken aan knoppen:

Voorbeeld

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

Probeer het zelf

Kleurrijke knoprand

Gebruik border Eigenschappen om een kleurrijke rand aan de knop toe te voegen:

Voorbeeld

.button1 {
  achtergrondkleur: wit;
  kleur: zwart;
  rand: 2px vast #4CAF50; /* Groen */
}
...

Probeer het zelf

Hoverbare knop


Gebruik :hover De selector kan de stijl van de knop wijzigen.

Tip:Gebruik overgangsduur Eigenschappen om de snelheid van het "hover"-effect te bepalen:

Voorbeeld

.button {
  overgangsduur: 0.4s;
}
.button:hover {
  achtergrondkleur: #4CAF50; /* Groen */
  kleur: wit;
}
...

Probeer het zelf

Schaduwknop

Gebruik box-shadow Eigenschappen om de schaduw van de knop toe te voegen:

Voorbeeld

.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);
}

Probeer het zelf

Uitgeschakelde knop

Gebruik 透明度 Eigenschappen om de doorschijnendheid van de knop toe te voegen (een uitziend "uitgeschakeld" effect te creëren).

Tip:Je kunt ook een kenmerk met de waarde "not-allowed" toevoegen cursor Eigenschappen, wanneer je de muis over de knop heenbeweegt, wordt dit kenmerk weergegeven als "no parking sign" (verboden parkeerbord):

Voorbeeld

.disabled {
  透明度: 0.6;
  cursor: not-allowed;
}

Probeer het zelf

Knopbreedte


Standaard genomen hangt de grootte van de knop af van de tekstinhoud (hetzelfde als de breedte van de inhoud). Gebruik breedte Eigenschappen om de breedte van de knop te wijzigen:

Voorbeeld

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

Probeer het zelf

Knopgroep

　

Verwijder de marges aan de zijkanten en voeg aan elke knop toe float:leftom een knopgroep te maken:

Voorbeeld

.button {
  float: left;
}

Probeer het zelf

Gebordeerde knopgroep

　

Gebruik border Eigenschap om een gebordeerde knopgroep te maken:

Voorbeeld

.button {
  float: left;
  border: 1px solide groen;
}

Probeer het zelf

Verticale knopgroep

Gebruik display:block Vervang float:left Groep de knoppen verticaal in plaats van naast elkaar:

Voorbeeld

.button {
  display: blok;
}

Probeer het zelf

Knoppen op afbeeldingen

Koffie

Probeer het zelf

Animatieknop

Voorbeeld 1

Voeg een pijl toe bij hover:

Probeer het zelf

Voorbeeld 2

Voeg een 'druk' effect toe bij klikken:

Probeer het zelf

Voorbeeld 3

Vermeng bij hover:

Probeer het zelf

Voorbeeld 4

Voeg een 'golvend' effect toe bij klikken:

Probeer het zelf