Replacing FP Hover Buttons

by cdwise 22. May 2013 09:55

This tutorial was created to show how easy it is to use buttons without using the deprecated FP Hover buttons. You can continue to use the button styles you are currently using but reduce your page code and speed up load time by replacing them with simple css and 3 buttons reused for each menu link. View the finished menu.

First create a hover button using the spacebar for the maximum number of letters you expect to use for your link text.

The person I created this tutorial for used the "glass" style button in blue so I'm also using it.  I generated three states for the button which look like:

link state over state  active state

Then I created an unordered list of links since lists are the proper mark-up for most menus. By default the menu now looks like:

To set these links apart as a menu the first thing I will do is to assign the list in an ID of menu. This allows me to target only those links in the menu for the new link styles.

#menu {
width: 7em;
margin: 0 auto; }

First thing I will do is create a #menu div to center the new menu in the #sidebar and provide a way to target just those links in the menu using descendent selectors and inheritance.

T to remove the list-style-item and remove all default margin and padding applying the following css:

#menu ul {
list-style-type: none;
margin: 0px;
padding: 0px;
}

Which leaves me with a clean list that looks like:

list default styles removed

Next we create the default link style setting the background image to the link state image created above. Before I do that there is a choice I have to make. The traditional one which is to set the sizes for the image in pixels and text also in pixels so that they will match what the old hover buttons did however that will make it impossible to scale the text very well.

The alternative is to scale in ems which means we need to convert the pixel size of the image to ems. To do that you divide the width by 16px. That means that our 100px images above are 6.5em but since that was rounded of a bit I increased the width slightly to 6.75em and centered the image. I also set the line height to 1.25em (20px in the image) so that the text would be vertically aligned properly.  It also means that the image quality will degrade if they are scaled up too high but the text will remain sharp. I'm going for the second approach.

So now my menu link css is:

#menu a {
text-align: center;
line-height: 1.25em;
font-size: .9em;
width: 6.75em;
display: block;
color: #000080;
text-decoration: none;
margin-bottom: .75em;
background: url('images/over.jpg') center no-repeat;
}

Which looks like:

default menu

To get our rollover state we need to define the hover pseudo class for the menu which would be:

#menu a:hover {
background-image: url('images/over.jpg');
}

That's all it takes since we are not changing the link text or color. If you wanted to change the text color to say black on rollover you would simply add "color: #000;" to the style definition.

The final step is to create an active class that you would apply to the link for the current page. In this case I'm going to use black as the text color and the active image created earlier. So my active class would look like this:

.active {
background-image: url('images/active.jpg');
color: #000000;
}

To demonstrate its use I have added the "active" class to the link for this page to the menu in the left column. You will notice that it has black text and a darker button.

You now have the look of the buttons without the overhead of multiple states for each link and no JavaScript is required.

Tags:

Tutorial | Expression Web | CSS

Pingbacks and trackbacks (1)+

Comments are closed


Outstanding Hosting