Single Image Three State Rollover Buttons Matrix

Yes, just a single image with 4x3 different buttons plus a background.

The image looks like:

Live demo:

• button1
• button2
• button3
• button4

The CSS code:

<style type="text/css">
/* =========================================================================
For any free or commercial usage please keep this credits text intact.
Author : Femi Hasani www.vision.to .
Credits: Jason M.Knight www.cutcodedown.com for "cutting  down" the CSS code.
The original version of this stylesheet and the associated (x)html
is available at http://www.vision.to/single-image-three-state-rollover-buttons-matrix.php
A link to www.vision.to would be apperciated but not mandatory. 
=============================================================================== */
* {
	margin:0;
	padding:0;
}

#matrixDemo {
	overflow:hidden; /* wrap floats */
	width:200px; /* trips haslayout, wraps floats in IE */
	background:url(images/articles/top_bar2.png) 0 0 no-repeat;
}

#matrixDemo li {
	position:relative;
	float:left;
	width:50px;
	height:50px;
	overflow:hidden;
	background:#CCC;
}

#matrixDemo a {
	position:absolute;
	/*
		There's a bug where IE won't re-render position changes unless an
		items display state changes, so we set inline here, which gets
		overridden by the absolute positioning anyways. Then we change
		it to block in the hover state
	*/
	display:inline;
	top:0;
	left:0;
	width:50px;
	height:150px;
	overflow:hidden;
	text-indent:-999em;
	text-decoration:none;
	outline:none;
	background:url(images/articles/top_bar2.png) 0 -50px no-repeat;
}

#matrixDemo a:active,
#matrixDemo a:focus,
#matrixDemo a:hover {
	display:block; /* see "#matrixDemo a" for explanation */
	top:-50px;
}

#matrixDemo .selected a {
	top:-100px;
}

#button2 a {
	background-position:-50px -50px;
}

#button3 a {
	background-position:-100px -50px;
}

#button4 a {
	background-position:-150px -50px;
}

</style> 

The HTML code

<ul id="matrixDemo">
	<li id="button1"><a href="#">button1</a></li>
	<li id="button2"><a href="#">button2</a></li>
	<li id="button3" class="selected"><a href="#">button3</a></li>
	<li id="button4"><a href="#">button4</a></li>
</ul>

Related Pages