CSS Buttons

Learn how to use CSS to set button styles.

Basic button style

Example

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

Try It Yourself

Button color

Please use background-color The property changes the background color of the button:

Example

.button1 {background-color: #4CAF50;} /* Green */
.button2 {background-color: #008CBA;} /* Blue */
.button3 {background-color: #f44336;} /* Red */ 
.button4 {background-color: #e7e7e7; color: black;} /* Grey */ 
.button5 {background-color: #555555;} /* Black */

Try It Yourself

Button size

Please use font-size The property changes the font size of the button:

Example

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

Try It Yourself

Please use padding The property changes the padding inside the button:

Example

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

Try It Yourself

Rounded corner button

Please use border-radius The property adds rounded corners to the button:

Example

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

Try It Yourself

Colored button border

Please use border Add a colored border to the button with the property:

Example

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

Try It Yourself

Hoverable button


When the mouse moves over the button, use :hover The selector can change the button style.

Tip:Please use transition-duration The property determines the speed of the "hover" effect:

Example

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

Try It Yourself

Shadow button

Please use box-shadow Add a shadow to the button with the property:

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

Disabled button

Please use opacity Add transparency to the button to create a "disabled" appearance.

Tip:You can also add a property with the value "not-allowed" cursor The property will display a "no parking sign" (no parking sign) when you hover the mouse over the button:

Example

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

Try It Yourself

Button width


By default, the size of the button depends on its text content (the same width as the content). Please use width Use the property to change the button width:

Example

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

Try It Yourself

Button grouping

　

Remove the margin and add a property to each button 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

Coffee

Try It Yourself

Animated Buttons

Example 1

Add an Arrow on Hover:

Try It Yourself

Example 2

Add a 'Key Pressed' Effect on Click:

Try It Yourself

Example 3

Fade In on Hover:

Try It Yourself

Example 4

Add a 'Ripple' Effect on Click:

Try It Yourself