CSS button
In this chapter, we introduce you to the use of CSS to make buttons.
Basic button style default button CSS button
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:
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:
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:
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:
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
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:
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:
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.
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:
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:
Example
.button {
float: left;
border: 1px solid green
}
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
Example
Add an arrow mark after you move the mouse over the button:
Hover
Example
Add “ripple” effect when you click:
Click
Example
Add a “press” effect when you click:
Click