1. Home
  2. CSS Button

CSS Button

This section, we introduce the use of CSS to create the button.

Basic Button Style

CSS Examples

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

Button color

Blue Red Gray Black

We can use the background-color property to set the button color:

CSS Examples

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

Button Size

12px 16px 20px 24px

We can use the font-size property to set the size of the button:

CSS Examples

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

Rounded button

4px 8px 12px 50%

We can use the border-radius property to set the fillet button:

CSS Examples

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

Button border color

We can use the border property of a button border color:

CSS Examples

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

Hover Button


We can use the :hover selector to modify the style by hovering over the button.

Tip: We can use the transition-duration property set to "hover" effect speed:

CSS Examples

.button {
-webkit-transition-duration: 0.4s; / * Safari * /
transition-duration: 0.4s;
}

.button: hover {
background-color: # 4CAF50; / * Green * /
color: white;
}
/en.

Button shadow

We can use the box-shadow property to add a shadow to the button:

CSS Examples

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

Disable button

We can use the opacity property to add transparency (looks similar to "disabled" attribute effects) for the button.

Tip: What can I add cursor property and set to "not-allowed" to set up a disabled image:

CSS Examples

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

Button Width


By default, the size of the button text on the button has decided (based on text matching length). We can use the width property to set the width of the button:

Tip: If you want to set a fixed width can use pixels (px) as a unit, if you want to set responsive buttons can be set as a percentage.

CSS Examples

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

Button Group

Button Button Button


Remove from the outside and add float:left set of buttons:

CSS Examples

.button {
float: left;
}

With border Button Group

Button Button Button


We can use the border property to set the button group with border:

CSS Examples

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

Button Animation

CSS Examples

Mouse over the arrow button to add:


CSS Examples

Add clicks "ripple" effect:


CSS Examples

Click when you add "pull-down" effect:


Hot Tutorials

Contact US