Hover Effects

hover Logo Hover Effects

Written by: Becky Aiken | IANR Media

You may be happy with the content of your website, but feel that it's just lacking something.

A good-looking website
Before Pizzazz
A good-looking website with PIZZAZZ!
AFTER PIZZAZZ!

...okay, that may be a bit overboard.

Kittens and sparkles aside, it is beneficial to your website to add interactive and engaging elements to create a richer experience for your users. In this tutorial, I'll show how to do simple things to make your site more dynamic, such as create hover effects, style images, incorporate UNL's marketing fonts, and add responsive videos.

Hover Effects

Something simple you can do to make your site more dynamic is to make your links change appearance when the user moves their mouse over them. This gives them an indication that something is going to happen when they click on your content, beyond the simple change in the cursor that is the browser default.

Button

No hover effect

Button

Hover effect!

However, like with many things, when it comes to hover effects, less is more.

Button

Yikes

Try to keep your changes subtle enough that they aren't overwhelming, but significant enough that they are still noticeable.

So how do you do it?

Read on to find out!