CSS Button Links : Rollover

Example:

mkv25.net

Html code:

Css code:

a#button {
	background: #FB5;
	color: black;
	font-family: Verdana, sans-serif;

	border: 4px outset #D92;
	width: 120px;
	margin: 2px;

	text-align: center;
	text-decoration: none;
}
a#button:hover {
	border-style: inset;
}

So the important bits here are:
- During the normal A state, give the link a width, a background colour, and an outset thick order.
- During the A:hover state, change the border style to inset, making it look depressed.

Blocking a set of links up, can work as a colourful 'interactive' menu, without the use of images.

Home
News
About
Links
Contact
Random Quote

Author: Markavian
Last edited on: 16th Jan, 3:07 pm
Please rate this article.

tutorial Pages