8.17. CSS button

In this chapter, we introduce you to the use of CSS to make buttons.

Basic button style default button CSS button

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

Button color ¶

Green Blue Red Gray Black, we can use background-color property to set the button color:

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

Button size ¶

10px 12px 16px 20px 24px

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

8.17.3. Example ¶

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

Fillet button ¶

2px 4px 8px 12px 50%

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

8.17.4. Example ¶

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

Button border color ¶

Green, blue, red, gray and black

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

8.17.5. Example ¶

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

Mouse over button ¶

Green, blue, red, gray, black, green, red, gray, black.

We can use it. :hover selector to modify the style of the mouse over the button.

Tip: we can use the transition-duration property to set the speed of the “hover” effect

8.17.6. Example ¶

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

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

Button shadow ¶

Shadow button displays shadows after hovering over the mouse we can use the``box-shadow`` property to add shadows to the button:

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

Disable button ¶

Normal button disable button

We can use it. opacity property to add transparency to the button (looks like the effect of the “disabled” property).

Tip: we can add cursor property and set to “not-allowed” to set a disabled picture:

8.17.8. Example ¶

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

Button width 250px 50%

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

Tip: if you want to set a fixed width, you can use px as a unit, and if you want to set a responsive button, you can set it to a percentage.

8.17.9. Example ¶

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

Button group ¶

Button Button Button Button

Remove the outer margin and add float:left to set the button group:

8.17.10. Example ¶

.button {
    float: left;
}

Framed button group ¶

Button Button Button Button

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

8.17.11. Example ¶

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

8.17.12. Example ¶

.btn-group button {
    background-color: #04AA6D; /* green background */
    border: 1px solid green; /* Green border */
    color: white; /* White text */
    padding: 10px 24px; /* Inner edge distance、 */
    cursor: pointer; /* Pointer/Hand icon */
    float: left; /* Side by side floating buttons */
}

Button animation ¶

8.17.13. Example ¶

Add an arrow mark after you move the mouse over the button:

Hover

8.17.14. Example ¶

Add “ripple” effect when you click:

Click

8.17.15. Example ¶

Add a “press” effect when you click:

Click