Latest web development tutorials

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

try it"

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 * /

try it"

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

try it"

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

try it"

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

try it"

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

try it"

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

try it"

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

try it"

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

try it"

Button Group

Button Button Button


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

CSS Examples

.button {
float: left;
}

try it"

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
}

try it"

Button Animation

CSS Examples

Mouse over the arrow button to add:


try it"

CSS Examples

Add clicks "ripple" effect:


try it"

CSS Examples

Click when you add "pull-down" effect:


try it"