CSS knapper

Lær hvordan du bruger CSS til at sætte knapstile.

Grundlæggende knapstil

Eksempel

.button {
  background-color: #4CAF50; /* Grøn */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
}

Prøv selv

Knapfarve

Brug background-color Egenskab ændrer knappens baggrundsfarve:

Eksempel

.button1 {background-color: #4CAF50;} /* Grøn */
.button2 {background-color: #008CBA;} /* Blå */
.button3 {background-color: #f44336;} /* Rød */ 
.button4 {background-color: #e7e7e7; color: black;} /* Grå */ 
.button5 {background-color: #555555;} /* Sort */

Prøv selv

Knapstørrelse

Brug font-size Egenskab ændrer knappens skriftstørrelse:

Eksempel

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

Prøv selv

Brug padding Egenskab ændrer knappens indre margen:

Eksempel

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

Prøv selv

Cirkulære knapper

Brug border-radius Egenskab tilføjer cirkulære kanter til knapper:

Eksempel

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

Prøv selv

Farvet kant på knapper

Brug border Tilføj farvet kant til knappen med egenskab:

Eksempel

.button1 {
  background-color: white;
  color: black;
  border: 2px solid #4CAF50; /* Grøn */
}
...

Prøv selv

Knap, der kan hovers


Brug :hover Vælgere kan ændre knapstilen.

Tip:Brug transition-duration Egenskab for at bestemme hastigheden af "hover" effekten:

Eksempel

.button {
  transition-duration: 0.4s;
}
.button:hover {
  background-color: #4CAF50; /* Grøn */
  color: white;
}
...

Prøv selv

Skyggeknapper

Brug box-shadow Tilføj skygge til knappen med egenskab:

Eksempel

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

Prøv selv

Deaktiveret knap

Brug opacity Tilføj gennemskinnelighed til knappen (opret "deaktiveret" udseende).

Tip:Du kan også tilføje en egenskab med værdien "not-allowed": cursor Egenskab, når du flytter musen over knappen, vises "no parking sign" (forbudt parkering):

Eksempel

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

Prøv selv

Knapbredde


Standardmæssigt afhænger knapstørrelsen af dens tekstindhold (lig med indholdets bredde). Brug width Brug egenskab for at ændre knap bredde:

Eksempel

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

Prøv selv

Knapgrupper

　

Fjern kantmargen og tilføj breddet egenskab til hver knap float:leftfor å lage knappgrupper:

Eksempel

.button {
  float: left;
}

Prøv selv

Kantete knappgrupper

　

Bruk border Egenskap for å lage kantete knappgrupper:

Eksempel

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

Prøv selv

Vertikale knappgrupper

Bruk display:block Erstatt float:left Grupper knapper vertikalt, ikke horisontalt:

Eksempel

.button {
  display: block;
}

Prøv selv

Knapp på bilde

Kaffe

Prøv selv

Animasjonsknapp

Eksempel 1

Legg til en pil ved musepekerover:

Prøv selv

Eksempel 2

Legg til en 'tastetrykk' effekt ved klikk:

Prøv selv

Eksempel 3

Fade inn ved musepekerover:

Prøv selv

Eksempel 4

Legg til en 'vågs effekt' ved klikk:

Prøv selv