Each link has five different states: link
, hover
, active
, focus
and visited
.
Link
is the normal appearance, hover
is when you mouse over, active
is the state when it's clicked, focus
follows active and visited
is the state you end up when you unfocus the recently clicked link.
I'm guessing you want to achieve a different style on either focus
or visited
, then you can add the following CSS:
a { color: #00c; }
a:visited { #ccc; }
a:focus { #cc0; }
A recommended order in your CSS to not cause any trouble is the following:
a
a:visited { ... }
a:focus { ... }
a:hover { ... }
a:active { ... }
You can use your web browser's developer tools to force the states of the element like this [Chrome->Developer Tools/Inspect Element->Style->Filter :hov]: Force state in Chrome Developer Tools
Learn how to style buttons using CSS.
Basic Button Styling
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;
}
Try it Yourself »
Button Colors
Use the background-color
property to change the background color of a button:
Example
.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 Yourself »
Button Sizes
Use the font-size
property to change the font size of a button:
Example
.button1 {font-size: 10px;}
.button2 {font-size: 12px;}
.button3 {font-size: 16px;}
.button4 {font-size: 20px;}
.button5 {font-size: 24px;}
Try it Yourself »
Use the padding
property to change the padding of a button:
Example
.button1 {padding: 10px 24px;}
.button2 {padding: 12px 28px;}
.button3 {padding: 14px 40px;}
.button4 {padding: 32px 16px;}
.button5 {padding: 16px;}
Try it Yourself »
Rounded Buttons
Use the border-radius
property to add rounded corners to a button:
Example
.button1 {border-radius: 2px;}
.button2 {border-radius: 4px;}
.button3 {border-radius: 8px;}
.button4 {border-radius: 12px;}
.button5 {border-radius: 50%;}
Try it Yourself »
Colored Button Borders
Use the border
property to add a colored border to a button:
Example
.button1 {
background-color: white;
color: black;
border: 2px solid #4CAF50; /* Green */
}
...
Try it Yourself »
Hoverable Buttons
Use the :hover
selector to change the style of a button when you move the mouse over it.
Tip: Use
the transition-duration
property to determine the speed of the "hover" effect:
Example
.button {
transition-duration: 0.4s;
}
.button:hover {
background-color: #4CAF50; /* Green */
color: white;
}
...
Try it Yourself »
Shadow Buttons
Use the box-shadow
property to add shadows to a 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];
}
Try it Yourself »
Disabled Buttons
Use the opacity
property to add transparency to a button [creates a "disabled"
look].
Tip: You can also add the cursor
property with a value of "not-allowed", which will display a "no parking sign" when you mouse over the button:
Button Width
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:
Example
.button1 {width: 250px;}
.button2 {width: 50%;}
.button3 {width: 100%;}
Try it Yourself »
Button Groups
Remove margins and add float:left
to each button to create a button group:
Bordered Button Group
Use the border
property to create a bordered button group:
Vertical Button Group
Use display:block
instead of float:left
to group the buttons below each other, instead of side by side:
Button on Image
Try it Yourself »