Creative uses of hover and transition

11 Jun 2012

Transition allows gradual change from one state to another state. It is used with the :hover state, which gives beautiful links, buttons, and headings. This article will list a few, creative uses of transitions, which could be used to make buttons, body text, or headings look better.

(Note that Delay isn't being used. It proves useless most of the time. Also note that all properties will have transitions, instead of only 'color'. This makes it easier if you have to add more changes later on.)

Transition for headings.

1. Letter Spacing

Done by using negative letter spacing on the default state, then using the normal value on the hover state. Here's the CSS.

We used rotate: (360deg), so that it returns to it's original place. You can increase the degrees in multiples of 360, to increase the rotation cycles.

You can alter it using transform-origin, to give different effects.

Transition for body text

Body text is usually small, thus increasing the size, or rotating the text isn't practical for body text. Here are a few styles which do in fact look good on body text.

1. Using border-bottom

From the start of the internet, links are always underlined. The problem with links being underlined is that the underline is of the same color as the text. This may not look good all the time, but here's a trick that will allow you to change the underline color. You use border-bottom instead of text-decoration.

I'm going to make the button bounce up using margins. Simple it might be, but gives a great effect.

As the existing margin-top was 1 em on the original button, and I'm going to bounce it up by .5em, I'll have to subtract .5em from 1em. This will give me .5em, which is the new margin. (If your buttons doesn't have any margins, you should use negative margins.)

.alpha .button:hover {
margin-top:.5em;
}

For the button to be balanced, we need to increase the bottom margin as well. We increase the bottom margin with the same amount which we reduced.

.alpha .button:hover {
margin-top:.5em;
margin-bottom:1.5em;
}

2. Shift to the right

I'll shift the button a bit to the right in this example. It comes especially handy when making "Continue Reading" or "More" buttons, as it gives the impression of motion. The code is pretty simple:

.beta .button:hover {
margin-left:1em;
}

3. Text bounce up

In this case, I'm going to make the text bounce up, instead of the whole button. It's pretty much similar to the first case, but I'll alter the padding instead of the margin here.

The total padding was 1em in the default state, so I'll have to keep the total same. Here's the CSS for the third button.

.gamma .button:hover {
padding: .2em 1em .8em 1em;
}

Conclusion

These are only few practical uses of transitions for everyday websites. There are more of creative uses for transition and hovers, and even more when we talk about artistic uses. Do tell me if you've found any creative uses for transitions and hovers.