Today we want to share some simple icon hover effects with you. The idea is to create a subtle and stylish effect using CSS transitions and animations on the anchors and their pseudo-elements. For the icons we are using an icon font (Eco Ico by Matthew Skiles, created with the IcoMoon app) which we add using the :before pseudo-class.
The markup only uses an anchor for the icon and we wrap a set into a container so that we can create a variety of effects:
<div class="hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a"> <a href="#" class="hi-icon hi-icon-mobile">Mobile</a> <a href="#" class="hi-icon hi-icon-screen">Desktop</a> <a href="#" class="hi-icon hi-icon-earth">Partners</a> <a href="#" class="hi-icon hi-icon-support">Support</a> <a href="#" class="hi-icon hi-icon-locked">Security</a> </div>
An example for a hover effect is the simple rotation of the pseudo-element for the icon:
.hi-icon-effect-6 .hi-icon { box-shadow: 0 0 0 4px rgba(255,255,255,1); transition: background 0.2s, color 0.2s; } .no-touch .hi-icon-effect-6 .hi-icon:hover { background: rgba(255,255,255,1); color: #64bb5d; } .no-touch .hi-icon-effect-6 .hi-icon:hover:before { animation: spinAround 2s linear infinite; } @keyframes spinAround { from { transform: rotate(0deg) } to { transform: rotate(360deg); } }
Note that a dashed border on a round pseudo-element (border-radius: 50%) does not work in FF 21.0 (effect 4)
I hope you enjoy the effects and find them inspiring!
BookBlock Revised
Can i use it with awesome font !!
awesome job! I really love it
thank you for sharing. i love codrops! <3
Awesome effect!
This effect looks like windows 8, it’s so fashion nowadays. Let’s use it 😉
These are really nice, thanks for the contribution.
Excellent Mary Lou !
different options to choose and all are very atractive !!
thanks for share,
to favs !
I have no words to say. It’s simply awesome.
Definitely will be using this for my upcoming project.
Mary Lou rocks!
Awesome. . great example what we can do with CSS3 Animation
Hello,
Suits well for “Feature Pages” and lists.
I try to implement every tutorial of Tympanus in my projects. But it is some what critical when it comes to integrate with CMSes like WordPress.
Could you publish a guide to help us integrate Tympanus articles like this or any other articles at Codrops with WordPress?
Everytime, I try to convert these to WordPress, I stuck somewhere with no solution and help. Hope some day you could help us with a guide or something that help us to turn the snippets as WordPress plugins. I ‘ve asked about this earlier.
Thanks!
I see no hover effect in the demo ‘4’. As there is no explanation about it in the tutorial, I think I am missing something.
Like I mention in the article and also in the demo this effect does not work in Firefox (assuming that you are using this browser). Cheers, ML
@Mary Lou
Sorry, I overlooked that.
Everything Mary Lou upload is amazing. Thanks for this nice flat icons hover effects. For sure will be used in my next project.
Really nice effect!
I’m interested in trying to get text to show just below the buttons and keep the listing left-to-right. Any tips? Thanks!!
Thank you Mary ))
Simple yet Fascinating!
How can i call the mouse over event from the Icon if I want to use Text next to the Icon, in order to active the effect. Thanks for sharing 😉
Nice work as always Mary.
Is there a better way to make make a more noticeable effect on a touch devices when typically hover doesn’t exist?
Rather than
Finding & Replacing :hover
into :active
or adding extra classes. ie:
/* Effect 1a */
.no-touch .hi-icon-effect-1a .hi-icon:hover {}
into
/* Effect 1a */
.no-touch .hi-icon-effect-1a .hi-icon:hover, .no-touch .hi-icon-effect-1a .hi-icon:ACTIVE {}
Hi Phil,
thanks a lot! That’s a very interesting question. I think that in some cases you actually can simply use :hover if you want an effect to show ‘on tap’ on some devices: Icon Hover Effects without .no-touch
It’s always important to see when this makes sense, i.e. is this a link to another page, or is it some kind of action?
What do you think?
Cheers, ML
All of them are beautiful!
Great as always.
I know it doesn’t make sense, but you can make it work on touch devices by adding
ontouchstart="this.classList.toggle('hover');
on icon. Maybe those icons are not links and you want a nice effect on them…