DEC
2008
15
Here is what we will be creating. This advanced CSS menu system allows for limitless possibilities for hover animations. Below are a few examples of how you can use this CSS technique.
How
To create this illusion we will be utilizing the CSS 'background-position' property. This property allows us to switch the alignment of a background image from top to bottom. The top section of our image will display the active state of our button and the bottom section will display the hover state. Also, this technique is SEO friendly thanks to the CSS 'text-indent' property. Let's look at the code needed to pull this off.
CSS Styles
.position {
padding: 0;
}
.position .image {
background: url(home.png) top left no-repeat;
}
.position a {
display: block;
width: 136px;
height: 43px; /* The height is half of the full image, so only
the top or bottom half is showing */
text-indent: -900em; /* For hiding the text from the user
but not search engines */
outline-style: none; /* The 'outline' properties are used to
hide the annoying box that outlines a link when clicked */
outline-width: medium;
text-decoration: none;
}
.position a:hover {
background-position: bottom left;
}
The CSS styles are pretty straightforward as to their purpose.
.position to place your button
.image controls the background image and places it in the active state
a handles the SEO text placement and other properties
a:hover switches the active state to hover state by altering the background-position property.
Now for the HTML code. It's simple and precise as it should always be.
HTML
<div class="position">
<a class="image" href="#" />Home</a>
</div>
Where I have demonstrated very simple uses for this CSS technique, it can be used in very complex ways to create impressive buttons or links. If you have any questions or comments feel free to contact me.
