Hover Effects in Web Design: Best Practices and Examples

By Matt, April 15th, 2009 in Design Tips, Web Design | 30 Super Comments

Design is in the details. No matter what field of design you work with, you will always hear that, because it is very true. The slightest details have a direct effect on the design as a whole. This is true in web design, too. Everything from the amount of white space between two interface elements to the size of a header will impact a website. Another one of those details is hover effects.

In navigation, usability is essential; hover effects not only help styling but they also help usability. Why is that? A good hover effect will tell a user when they have a link under focus, and which link they have under focus.

In the following article, I will go over the best practices and techniques for hover effects. I will be using over 30 examples to show good use of hover effects.

Gradient Hovers

The more common type of hover effect is the gradient. There are many uses of this, here are a few.

Gradient vs. Gradient

Take a look at the navigation shown below to understand what this means. The normal button, not under focused and not selected has a gradient fill that goes from darker at the bottom to lighter at the top. When under focus, the gradient flips from dark at the top and light at the bottom. This is an especially good hover effect because the hover button is very different from the normal, and adds depth to the design. Look at the two buttons side by side. You can very easily determine the difference between the two. This is essential what you should aim for: hover effects that are easily recognizable and distinguishable.

Gradient Button, Solid Color on Focus

Another common navigation in regards to gradients is the use of a gradient button, and a solid color when under focus. The website below, Miro, uses a gradient fill on each button. When hovering over a button, the fill switches to a solid white.

Two Different Gradients, One Sharper than the Other

Another effect that I will discuss briefly is the technique of using to different gradients going in the same direction. The standard gradient is light, while the hover gradient is darker. This can be seen especially in Apple.com.

Blur Effect

When working with larger interface elements or image links, a blur when hovered over is the way to go. This looks really awesome, and is one of those details that can really help to make the design more usable. Take a look at these websites and how they use blur effects to show focus of images. Notice that in each, the blur is slight so the image is still visible.

In this design, a hover effect is used on each of the portfolio thumbnails. Also notice the labels on each thumbnail. The blur helps to bring the focus off of the image and up to the white text. This is a very usable feature, and it looks very great in terms of styling.

In this site, Best Web Gallery, a blur is used to bring the user’s focus up to the large tooltip preview element.

Contrast is Key

One of the most important aspects of a good hover effect is the coloring, specifically the contrast. The color of text when hovered should be a large contrast from the normal color of the text. Why? Well, a strong contrast improves usability of links and is more convenient to users.

Here is one example of a good text contrast. The orange is a far stretch from white colorwise, so the hover works nicely. Furthermore, the orange actually matches that of the other colors in the site. Staying within the color palette of the entire design is something to keep in mind.

So far I’ve discussed the importance of contrasts of text, but what about button backgrounds? The website below, Bartelme Design, does a good job of contrasting the background color of buttons. The normal button uses a light blue background. When hovered, a dark blue is used. They are both blues that work nicely, but they are far enough from each other that the hover works nicely.

Color Off, Color On

Yet another excellent technique is having an element with no color normally, then show the color upon the hover. Another form of this is navigations’ showing a radial gradient as a lighting effect on the hover. The best example of this is the Pixelmator website, shown below. In a button set in the siderbar, icons are used to support the buttons. When the buttons are not under focus, they are colorless. However, when you hover over the button the color of the icon is shown.

Another technique that goes along with this is that of taking a normal button with a solid color fill and showing a gradient or some sort of highlight on the hover. What does this mean? Well, take a look at the examples below that use this technique.

First, we will take a look at Best Web Gallery once again. In this design, the buttons take on the fill of the header. When hovered, the fill changes to a brightly colored gradient with strong highlights. Also, this is an example of the icon without color showing color on the hover. The RSS icon is normally a dark color, but shows as orange when the button is focused.

Label Hover Effects

Hover effects can be used for more than just styling and usability. A hover effect can provide more information, similar to a tooltip. You have already seen one example of this, in Best Web Gallery. The screenshot is a hover effect that gives users a preview of the gallery item.

Also, by the creator of Best Web Gallery, Web Designer Wall uses a hover effect with a label. The hover provides more information that otherwise would not fit int the button.

Another well-known hover is the Javascript-based hover element on the Coda website. This one is a label as well as a menu. Hover menus could also be considered a hover effect, but that is a whole different subject.

Also, a hover label is used on Webdesigner Depot. When the user hovers over the title in the header, a label is shown.

Good Main Navigation Hover Effects

Clearleft

This site uses a great graphical hover based navigation. When focused, the background is expanded as a dimensional element.

IconDock

A great lighting hover effect.

Bohemian Coding

A nice gradient hover. When the user hovers, a darker gradient is shown.

Cultured Code

A nice light hover effect.

Dragon Interactive

A beautiful and vibrant Java-based hover, with a strong gradient to add dimension.

South Creative

A nice lighting hover with nice colors.

RealMac Software

A good example of a strong gradient.

Alexandru Cohaniuc

A nicely colored gradient with a good green shade.

Good UI Element Hover Effects

Quommunication

This is a very subtle effect, but you will see that when you hover over one of the two grey interface elements, it darkens.

Tim Van Damme

Another good example of gradient based hover and coloring effects.

Virb

When you hover the interface elements on the right side, they show color.

Espionage

Notice the bright blue hover color on the buttons.

Expression Engine

Another perfect example of up and down gradients in structured navigation.

Alex Buga

A nice hover effect with a lined pattern.

Paramore Redd

A nice hover effect that’s awesome yet a bit difficult to really see in a screenshot, show check out the site to look at.

Media Temple

There are numerous hover effects on this page alone, but focus on the light blue hover fill in the product selection element.

Some Not So Good Examples

I don’t like to saw “bad” examples because all of these designs have good features, but I would just like to point out a few places where hover effects should have been used.

Yahoo!

Yahoo! should certainly have but a few light hover effects on these tabs and similar UI elements.

Google

Google is meant to be simple, but it’s almost too simple. These are links instead of buttons, so they don’t need too much in terms of hover effects. However, it would be nice to see at least an underline or color hover.

Komodo Media

This is an excellent site, but some hover effects such as a color change would help a bit. A light gradient hover could also work.

Turbomilk

With tabs, a hover effect should always be used. A gradient color change would work perfectly in this tab set.