Styling Links with CSS - Examples

Use the following CSS to change your link styles.
Return to Styling Links with CSS
Hold your mouse over this link to see it change color: change hover color

a:hover { color: #0f0; }

Return to Styling Links with CSS
Click and hold your mouse on this link to see the active color: change active color

a:active { color: #f00; }

Return to Styling Links with CSS
Click on this link, then return to this page and reload and it should change from blue to pink. If you've already been to this page, it will be pink right now: change visited color

a:visited { color: #f0f; }

Return to Styling Links with CSS
This link will have a hover, active, and visited link color set on it: change all of them

a:link { color: #00f; }
a:hover { color: #0f0; }
a:active { color: #f00; }
a:visited { color: #f0f; }

Return to Styling Links with CSS
This link will have an icon beside it: link with an icon

a {
padding: 0 2px 1px 15px;
background: #fff url(ball.gif) left center no-repeat;
color: #c00;
}

Return to Styling Links with CSS
Hover over the link and activate the link to see the bullet icon change: hover and active icon

a { padding: 0 2px 1px 15px; color: #c00; }
a:link { background: #fff url(ball.gif) left center no-repeat; }
a:hover { background: #fff url(ball2.gif) left center no-repeat; }
a:active { background: #fff url(ball3.gif) left center no-repeat; }

Return to Styling Links with CSS
button 1

a {
border: 4px outset;
padding: 2px;
text-decoration: none;
}

Return to Styling Links with CSS
button 2

a {
border-style: solid;
border-width : 1px 4px 4px 1px;
text-decoration : none;
padding : 4px;
border-color : #69f #00f #00f #69f;
}

Return to Styling Links with CSS
button 3

a:link {
border-style: solid;
border-width : 1px 4px 4px 1px;
text-decoration : none;
padding : 4px;
border-color : #69f #00f #00f #69f;
}
a:hover { border-color: #ccc; }

Return to Styling Links with CSS
View the original article here