CSS buttons

Lär dig hur du använder CSS för att ställa in knapptillstånd.

Grundläggande knappstil

Example

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

Try it yourself

Knappfärg

Använd background-color Egenskap för att ändra bakgrundsfärgen på knappen:

Example

.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;} /* Svart */

Try it yourself

Knappstorlek

Använd font-size Egenskap för att ändra storleken på knappens teckensnitt:

Example

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

Try it yourself

Använd padding Egenskap för att ändra inre marginalen på knappen:

Example

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

Try it yourself

Rundkantad knapp

Använd border-radius Egenskap för att lägga till rund kant på knappen:

Example

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

Try it yourself

färgad kant på knappen

Använd border egenskap för att lägga till färgad kant till knappen:

Example

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

Try it yourself

flyttbara knappar


När muspekaren flyttas över knappen, använd :hover väljare kan ändra knapparnas stil.

Tips:Använd transition-duration egenskap för att bestämma hastigheten på "hover"-effekten:

Example

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

Try it yourself

skuggknappar

Använd box-shadow egenskap för att lägga till skugga till knappen:

Example

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

Try it yourself

inaktiverade knappar

Använd opacity egenskap för att lägga till genomskinlighet till knappen (skapa "inaktiverad" utseende).

Tips:Du kan också lägga till en cursor egenskapen, när du håller muspekaren över knappen, visas "no parking sign" (förbjudet parkeringsskylt):

Example

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

Try it yourself

knappbredd


Som standard beror knappens storlek på dess textinnehåll (likadant som innehållets bredd). Använd width egenskap för att ändra knappens bredd:

Example

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

Try it yourself

knappgrupper

　

Ta bort marginal och lägg till float:leftto create button groups:

Example

.button {
  float: left;
}

Try it yourself

Bordered button groups

　

Use border Property to create bordered button groups:

Example

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

Try it yourself

Vertical button group

Use display:block Replace float:left Group buttons vertically instead of horizontally:

Example

.button {
  display: block;
}

Try it yourself

Button on image

Kaffe

Try it yourself

Animated button

Example 1

Add an arrow when the mouse hovers:

Try it yourself

Example 2

Add a 'key press' effect when clicked:

Try it yourself

Example 3

Fade in when the mouse hovers:

Try it yourself

Example 4

Add a 'ripple' effect when clicked:

Try it yourself