How to Create a Hover Effect Using CSS
April 27, 2010 by Barbara Holbrook · 14 Comments
Hover effects, rollovers, super-fancy link styles — regardless of what you call them — are a great way to get extra bang for your buck when putting together a website.
Today we’ll be learning how to add a unique and creative feature to your website’s links using CSS. Using CSS Pseudo Classes, we can alter every aspect of a link when a visitor “hovers” over it, or puts their cursor over the link.
Change a Hovered link’s background color with CSS:
a.link1:link { color:black; background-color:white; }
a.link1:visited { color:black; background-color:white; }
a.link1:hover { color:white; background-color:black; }
a.link1:active { color:black; background-color:white; }
In the above example, the link class is set to “link1.” Text with this class will appear as solid black text. Once the link is hovered, it will appear as white text with a black background like so: my super awesome class link1.
Using CSS to change the background of hovered links can have a striking effect. Try setting the background-color to “yellow” for a CSS highlighter effect, or using two different background colors like so: my super awesome class link2
You can create CSS hover effects using just about any combination of CSS styles you can imagine. Pure text effects can take advantage of “text-decoration” effects such as strikethrough and underline; or change the font color, font-family, or font-style.
More advanced CSS hover effects can also be used to simulate buttons without having to create image rollovers or using any javascript.
Other CSS Hover effects to try:
a.link3:link { text-decoration: line-through; }
a.link3:visited { text-decoration: line-through; }
a.link3:hover { text-decoration: none; }
a.link4:link { font-family:Georgia; font-weight:bold;}
a.link4:visited { font-family:Georgia; font-weight:bold;}
a.link4:hover { font-family:Georgia; font-style:italic;}
a.link5:link { padding: 2px; border: 1px solid #2F818D; }
a.link5:visited { padding: 2px; border: 1px solid #2F818D; }
a.link5:hover { padding: 2px; border: 1px solid #efefef; background-color:#2F818D; }
And here is how each link class will look with the hover effect in place:
The “a.link3″ class will output the text with a strickthrough effect when a user hovers over it. The “a.link4″ class will change the font face entirely to Georgia (or any other web font you specify).
And finally, “a.link5″ is a more advanced CSS hover effect that combines borders and background-colors to simulate a simple button.
One thing to keep in mind when creating a CSS hover effect for your links is that unless your new link class specifically overwrites the styles of your global link class you may have some unexpected effects.
You will notice that each of the above sample links has an underline when you hover over the text even though an underline is not specified in the link class a:hover style. This is because the global link style of TutorialBlog.org has an underline applied to the psuedo class a:hover.
In order to remove global styles from your new link class simply over ride the original CSS. For instance adding “text-decoration:none;” to the CSS will remove the underline from any of the above hover effects like so:
a.link6:link { font-family:Georgia; font-weight:bold;}
a.link6:visited { font-family:Georgia; font-weight:bold;}
a.link6:hover { font-family:Georgia; font-style:italic; text-decoration:none;}
Any of these CSS hover effects can be applied globally to all of your links sitewide by using the standard a:link, a:hover, etc. instead of creating a specific link class. These styles can attract a lot of attention to your links or add some extra style just where it’s needed. Be creative!
Now, that you know how to use CSS to create hover effects, next time we’ll talk about styling your “unordered list” elements (ul and li) to create drop-dead gorgeous navigation without a lick of javascript.
About Barbara Holbrook
Barbara is a WordPress designer in Long Beach, CA helping small businesses develop a personalized social media strategy that is based on common sense not hype.
Barbara, thanks for this well written tutorial, looking forward for the next one, great post!
Thanks for the tutorial, is there a way to get the text to “pop out” when hovering?
Works in Firefox but not in Chrome. Insightful tutorial btw.
I think when you start mixing this with background images and padding and getting a little more in-depth with the CSS it is amazing to realise how much it means to get the basics right. I love using these classes along with lists for menus, H1 replacements and other clever SEO CSS techniques.
It does amaze me that people don’t use it as common practice sometimes. The smallest details that can be made in the CSS can make the biggest changes to how a user interacts with your site and how a design will take inspiration to develop their own work to a higher standard and level.
Really good tutorial, I look forward to seeing more of its kind!
Not only can you use this CSS for plain text but you can also use it for rollover images. This saves a lot of space when developing and you won’t have to worry about validating strict with a border attribute set at 0.
Thanks for the tutorial.It’s very useful for me to optimize my wordpress site.
Thanks! Helped me a lot!
Thanks for this handy little effect.
I’m always learning CSS skills.
I thought they had HTML codes for this, or maybe that is just for Myspace. This is a really really good tool though, it does add spice to the website.
——————————-
http://www.gizellefashion.com
(SEO Writing Services)
Williams
Nice handy CSS hover effect here thanks for this superb tutorial!
Thanks for the tips on this hovering feature.
Very handy, thanks!
Don’t forget to use the CSS selectors and declarations in the specific order they are set in the tutorial, i.e:
a.link1:link {}
a.link1:visited {}
a.link1:hover {}
a.link1:active {}
so ‘a.link1:link’ comes first followed by ‘:visited’, ‘:hover’ and then ‘:active’ in that order.
I had a few problems when first styling links in CSS in that I styled the ‘:hover’ before the ‘:link’ in the code which caused certain elements not to work.
Hope this helps someone who might be stuck however, if I’m wrong, don’t quote me on it!
Great list of drop down menus. All very clean and easy to navigate.