CSS Forum

**mattbuk** · 06-29-2006, 05:49 AM

I need some help with a css button design.

I want to make the following graphic into a css style and will be used as a div.

Mouse Out

Mouse Over

Only one will need to be created as its going to be an administrable navigation bar.

To view how it will be used click here:
http://www.imagered.co.uk/demo/scruples

This is only a test page.

Any help would be great

**gringo** · 06-29-2006, 08:09 AM

You can use css to display a different background image for your hovered link :

HTML Code:

a:link, a:visited {
  color: #fff;
  background: url(white.gif) top left no-repeat;
}

a:hover {
  color: #ccc;
    background: url(gray.gif) top left no-repeat;  
}

**funkdaddu** · 12:45 AM

But why use an image when you can just create it all in just plain CSS?

HTML Code:

<style>
body {
	background-color: black
}

a.btn {
	padding: .25em .25em;
	border: 4px double white;
	font-family: Arial;
	font-size: 8pt;
	text-transform: uppercase;
	color: white;
	text-decoration: none;
	display: block;
	clear: both;
	float: left;
	width: 120px;
	text-align: center
	
}

a.btn:hover {
	color: #ddd;
	border-color: #ddd
}
</style>

<body>
<a href="#" class="btn">Home</a><br>
<a href="#" class="btn">About Us</a><br>
<a href="#" class="btn">Hugo Boss</a><br>
<a href="#" class="btn">Armani</a><br>
<a href="#" class="btn">Locations</a>
</body>

**LadynRed** · 06-30-2006, 12:04 PM

Good one !
Even better than all those class="btn" would be to put the nav in a UL and style the links inside it in the CSS

.

**mattbuk** · 07-03-2006, 12:29 PM

Quote:

Originally Posted by funkdaddu

But why use an image when you can just create it all in just plain CSS?

HTML Code:

<style>
body {
	background-color: black
}

a.btn {
	padding: .25em .25em;
	border: 4px double white;
	font-family: Arial;
	font-size: 8pt;
	text-transform: uppercase;
	color: white;
	text-decoration: none;
	display: block;
	clear: both;
	float: left;
	width: 120px;
	text-align: center
	
}

a.btn:hover {
	color: #ddd;
	border-color: #ddd
}
</style>

<body>
<a href="#" class="btn">Home</a><br>
<a href="#" class="btn">About Us</a><br>
<a href="#" class="btn">Hugo Boss</a><br>
<a href="#" class="btn">Armani</a><br>
<a href="#" class="btn">Locations</a>
</body>

Cheers mate!!!!

Thats exactly what I wanted