CSS Tips and Tricks – CSS Links and Rollovers

There are a lot of things you can do with links, including creating link menus with different types of “hovers” or rollover effects. We take you step-by-step through a variety of link techniques and CSS experiments to expand the possibilities by changing background and hover styles. Then we explore even more advanced techniques of using images and photographs in the background and changing their hover style as well by having it switch images on mouse rollovers.

Changing Division Container Boxes Into Link Menus

These last two border examples we showed you used inset and outset, frequently used to create buttons and menu items. Here is an example of a single “button” with an outset border.

Here is a row of these buttons to create a menu effect.

The following is the same layout featuring an inset border rather than an outset border.

When set side by side or one on top of each other with the outset border button, the inset border looks like a pressed button.

Want more of a challenge? Looking to play with your own CSS experiments? Assign these styles to a buttonmenu division with a list of links and have the inset border in the a:hover rule. This is called a CSS Rollover Menu. Move your mouse over the links to see the effect.

Pretty amazing. Many designers have tried to create this mouse rollover effect for years using javascript programming, mouseover commands, and other techniques. CSS made the process of creating CSS Rollover Menus much easier.

To create our CSS Rollover Menu, we created a division with the ID of buttonmenu inside our style sheet. Notice the 10px left margin for the overall division. This aligns the menu within our page style. You can change this to fit your own design. The list selectors are set to have no margins or padding and we’ve remove the bullets from the list by setting the list-style-type and list-style-image to “none”. The link style is set to with the 10px outset border and the hover style is set with a 10px inset border. We need to include the background color and text color in the hover so it will match the non-hover (inactive) state of the original, giving the appearance that only the border is changing.

The HTML structure is very simple. We just do a list of links inside of a division called “buttonmenu”. When the mouse “rolls over” the link, the list design elements are triggered through the use of the anchor hover CSS selector.

There are many ways to the CSS Rollover Menus. Here are a few more examples of our CSS experiments with rollover menus. Move your mouse over the links (to this page) to test them.

We changed the border to dotted and the hover state to dashes. The border width is thin, only 2 pxs. Below, we thickened the border 8px for a different effect.

Next, we’ve taken this experiment a little further and changed the border to solid and from blue to purple for the hover effect on the CSS mouse rollover.

Putting all the techniques we’ve learned together, we’ve taken these same links and completely changed the text color, background color, and border color on the hover for a dramatic CSS Rollover Menu.

As you’ve seen, the technique to create pure CSS Rollover Menus isn’t that complicated. Use your imagination and see what you can create.

CSS Rollover Menus and Hover Features

• 2D Web Design – Create Stylish Menus with CSS
• Web Page Designer’s CSS Rollovers with Single Image
• Horizontal Menu Bar Using Style Sheets
• Juicy Studio CSS Styling a List as a Menu
• HTML CSS Text Rollovers
• CSS-2 Pure CSS Menus with No Javascript

Using Background Images in Links

Using the technique we discussed for our header featuring a background image, we can change the look and feel of the same boxes, with and without borders. Remember to include a background color for the division in case the background image doesn’t load or to be visible while waiting for the background image to load. Oh, and after you read through this basic introduction into background images in links, check out the wide range of CSS background possibilities in our CSS Tips and Tricks with Backgrounds and Transparencies and CSS Unleashed – Experiments with Background Images and Backgrounds.

Within the code below there is a background image An image placed within a CSS selector sits in the background, so to speak, of a page rather than on the page itself like an embedded graphic. Because the background graphic is within the style sheet code, when the style sheet is absent, such as with software for the blind and visually impaired, the graphic is invisible to the reader.

The background image is positioned relative to the container it resides in. The various declaratons include defining if the graphic is repeated, not repeated, and if repeated, how many times and in which directions; the relative position (top, bottom, left, right) within the container; and whether it is fixed or absolute. The repeating factor is based upon an x-y grid with repeat-x across and repeat-y vertical. We have ours set to not repeat and to sit in the left, bottom corner, fixed in place.

The background example below definitely has some problems. We show you this not as a showcase of what is possible, but more as an example of what NOT to do. We visit many web pages with such backgrounds where it is almost impossible to read the text. Not only impossible, it gives headaches more than information. Keep your backgrounds complementary and appropriate to showcase your content.

By using a dramatic but monochromatic background, your text is enhanced and the background is now a part of the overall design theme.

The examples below use our images and show how to use text and photography together to create interesting effects. You can find more examples in our article on CSS Unleashed – CSS Experiments Showcasing Your Photography. We’ve left the text plain to highlight the background in these examples, except for the last one where we had some showcase fun.

Let’s do another experiment and using the technique of CSS experiments rollover menus we highlight on one of our sample layouts which uses images for the background rather than colors.

The technique uses the photograph seen to the right of this text and these four “buttons” graphically created from the original photograph.

The buttons are only visible on the hover, when the mouse moves over the link. They disappear after the mouse moves away from the link. There is a different hover class statement for each link, 1 through 4, which features the different background image.

The HTML structure is very simple and easy.

The style sheet code looks complex, but it isn’t really. Here is the full code. We have condensed the code using CSS shorthand.

Working with Cascading Style Sheets, the only limits are technical. Once you figure out the technical, the design possibilities are unlimited.

CSS Backgrounds – Links and Resources

• W3 Schools: CSS Backgrounds
• Making a Seamless Web Page Background
• Blooberry’s CSS Properties – Backgrounds
• Tizag’s CSS Backgrounds
• SouthernTwilight Tutorial CSS Backgrounds and Colors
• Your HTML Source – CSS and Backgrounds
• HTML Goodies – So You Want Information on CSS and Backgrounds, Huh?
• Cascading Style Sheets (CSS); Backgrounds
• Momps Web Design: Cascading Style Sheets – Backgrounds
• W3’org’s CSS-2 Colors and Backgrounds

CSS Backgrounds – Links and Resources

• W3 Schools: CSS Backgrounds
• Making a Seamless Web Page Background
• Blooberry’s CSS Properties – Backgrounds
• Tizag’s CSS Backgrounds
• SouthernTwilight Tutorial CSS Backgrounds and Colors
• Your HTML Source – CSS and Backgrounds
• HTML Goodies – So You Want Information on CSS and Backgrounds, Huh?
• Cascading Style Sheets (CSS); Backgrounds
• Momps Web Design: Cascading Style Sheets – Backgrounds
• W3’org’s CSS-2 Colors and Backgrounds