HTML tutorial
CSS3 tutorial
Bootstrap tutorial
JavaScript tutorial
JQuery tutorial
AngularJS tutorial
React tutorial
NodeJS tutorial
PHP tutorial
Python tutorial
Python3 tutorial
Django tutorial
Linux tutorial
Docker tutorial
Ruby tutorial
Java tutorial
C tutorial
C ++ tutorial
Perl tutorial
JSP tutorial
Lua tutorial
Scala tutorial
Go tutorial
ASP.NET tutorial
C # tutorial
Learn how to style buttons using CSS
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
}
Green
Blue
Red
Gray
Black
Use the background-color
property to change the background color of
a
button:
.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 */
10px
12px
16px
20px
24px
Use the font-size
property to change the font size of a button:
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3
{font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Use the padding
property to change the padding of a button:
10px 24px
12px 28px
14px 40px
32px 16px
16px
.button1 {padding: 10px
24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
2px
4px
8px
12px
50%
Use the border-radius
property to add rounded corners to a button:
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3
{border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Green
Blue
Red
Gray
Black
Use the border
property to add a colored border to a button:
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
Green
Blue
Red
Grey
Black
Green
Blue
Red
Grey
Black
Use the :hover
selector to change the style of a button when you move the
mouse over it.
transition-duration
property to determine the
speed of the "hover" effect:
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
Shadow Button
Shadow on hover
Use the box-shadow
property to add shadows to a button:
.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);
}
Normal Button
Disabled Button
Use the opacity
property to add transparency to a button (creates a
"disabled" look).
cursor
property with a value of
"not-allowed", which will display a "no parking sign" when you mouse over the
button:
.disabled {
opacity: 0.6;
cursor: not-allowed;
}
250px
50%
100%
By default, the size of the button is determined by its text content (as wide as its
content). Use the width
property to change the width of a button:
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width:
100%;}
Button
Button
Button
Button
float:left
to each button to create a button group:
.button {
float: left;
}
Button
Button
Button
Button
border
property to create a bordered button
group:
.button {
float: left;
border: 1px
solid green;
}
Button
Button
Button
Button
display:block
instead of float:left
to group the buttons below each other, instead of side by side:
.button {
display: block;
}
Try it Yourself »
Add an arrow on hover:
Add a "pressed" effect on click:
Fade in on hover:
Add a "ripple" effect on click: