CSS button


May 04, 2021 04:00 CSS3


Table of contents


CSS button

In this section, we'll show you how to make buttons using CSS.


Basic button style

CSS instance

.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 out . . .

The color of the button


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

CSS instance

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

Try it out . . .

The size of the button

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

CSS instance

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

Try it out . . .

Fillet button

2px4px8px12px50%

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

CSS instance

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

Try it out . . .

The color of the button border

Green, blue, red, gray, black

We can use border property to set the button border color:

CSS instance

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

Try it out . . .

Hover button

Green, blue, red, gray, black
Green, blue, red, gray, black

We can use :hover selector to modify the style that hovers over the button.

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

CSS instance

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

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

Try it out . . .

Button shadow

Shadows appear when the shadow button is hovered over

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

CSS instance

.button1 {
box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0rgba(0,0,0,0.19);
}

.button2:hover {
box-shadow: 0 12px16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

Try it out . . .

Disable the button

The normal button disables the button

We can use opacity to add transparency to the button (looks like the "disabled" property effect).

Tip: We can cursor property and set it to "not-allowed" to set a disabled picture:

CSS instance

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

Try it out . . .

The width of the button

250px
50%100%

By default, the size of the button is determined by the text content on the button (matching length based on the text content). We can use width property to set the width of the button:

Tip: If you want to set a fixed width, you can use pixels (px), and if you want to set a responsive button, you can set it to a percentage.

CSS instance

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

Try it out . . .

The button group

ButtonButtonButtonButton


Remove margins and add float:left set button groups:

CSS instance

.button {
float: left;
}

Try it out . . .

Bordered button groups

ButtonButtonButtonButton


We can border property to set up a bordered set of buttons:

CSS instance

.button {
float: left;
border: 1pxsolid green
}

Try it out . . .

Button animation

CSS instance

Add an arrow marker when you move the mouse over the button:

Hover

Try it out . . .

CSS instance

Add a "ripple" effect when clicking:

Click

Try it out . . .

CSS instance

Add the "Down" effect when clicking:

Click

Try it out . . .