Hover Effect in Modern Web Design: Definition and Usability Tips
Hover effect is simply a change (of color, size, shape, image etc.) of some element while you put a mouse arrow over it. Commonly it is achieved with CSS coding. The hover effect is not cranky at all and can be used practically for any CSS element.
The easiest way to make the hover effect in CSS is using :hover selector, which is a CSS pseudo-class. It would take no extra efforts to put a hover selector in the code. Let’s review a background color change for a link: you just need to add this after selecting and styling a link.
a:hover
{
background-color:red;
}
You can try it by yourself here: change the elements of the code the way you wish and click “Submit Code” to see the result.
I mentioned the most simple method to make hover effect, but :hover selector and even CSS is not the only solution. For example, you can use JavaScript to build switching images. But anyway, CSS is the most common and handy system to manage hover effects.
* * *
Hover effect became widespread and it’s not surprising: hover is an efficient way to create an interesting and attractive effects, if you approach it wisely. You can check this digest of hover effects to make sure they can be performed beautifully . However the nice look is not the main benefit of hover effect – first of all it improves usability. So, I’d like to present couple tips for better understanding of the hover effect role for user experience.
Click magnet
The hover effect grants an element with a great highlighting feature. When a mouse cursor over an element makes it change, it asks a user “Click on me”. The simple conclusion is to use it with such interactive elements as links. But the hover should be added within reason, so you must choose links you want visitor pay attentions most. Nevertheless, the hover effect can also be used as to outline creatively some graphical elements or even in artistic manner.
Be discreet
In the light of the golden middle principle the hover effect shouldn’t be excessively presented. A plenty of pulsing elements would make a visitor feel uncomfortable, especially if the hovered elements are intended for navigation through a website. You need to take only the most important links or elements and keep in mind that minimalism is still in trend.
Adhere to theme unity
It’s an obvious tip, so I will move to specifics. While the hover for text links and buttons has become a standard, there are more and more attempts for original interpretation. For example, mouse over arrows can show some graphical element representing the page that will open up after clicking (like here). Feel free to experiment with hover effects, but always keep in mind that it should complement the design, not crook it.
* * *
I just defined the points of what we should consider primarily in designs with hover effects. Everything is in your hands: hover is so flexible effect that you can model it to infinity. Don’t miss your chance to make your website more interactive creatively.
Please comments if you have anything to add or just want to express your opinion about the subject.
* * *
Image credit: Vector Button Set by Shutterstock
About the author:
Art Rivera: Deeply interested in everything connected with Internet, I sincerely suppose the web is the only future reality for the humanity through its inevitable involving into every part of human life. I’m not a great fan of cyberpunk concept, but the world is keeping that certain direction of total connectedness. And of course there should be someone, who can write the history, who would describe and analyze and enter in the record all notable changes and tendencies on the web. Hello, it’s me.
