Styling Links with CSS

Examples

Use the following CSS to change your link styles.

Return to Styling Links with CSS

Change Hover Color

Hold your mouse over this link to see it change color: change hover color

a:hover { color: #0f0; }

Return to Styling Links with CSS

Change Active Color

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

Change Visited Color

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

Change Hover, Active, and Visited Colors

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

A Link with a Bullet Icon

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

The Bullet Icon Changes on Hover and Active

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

Style Borders to Create Buttons Out of Links

button 1

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

Return to Styling Links with CSS

Button with Colored Borders

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 with Hover State

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