From our sponsor: Meco is a distraction-free space for reading and discovering newsletters, separate from the inbox.
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!
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…
Doesn´t work in my Chrome on Windows 8, because it is detected as “touch”, even if i use my mouse
Modernizrs touch-detection is not optimal, because it can only detect if the touch api is available, but not if a touch input is actually used…
Same here… It doesn’t work with Chrome on Windows 8…
Works fine for me.
Very cool article, Lou!
I was wondering, what are the options to utilize this on windows phone (7.5+) and windows (IE)? Is there a jquery plugin or a polyfill to help with the transitions? What do you recommend?
so cool, thanks for your share. <3
Great work, i am going to use them a lot
I’m using Chrome + Windows 8 and it works fine for me. Very cool, thanks for sharing.
Maybe because you don’t have a touchscreen…
Demo is awesome!!! Demo 4 is not working.
Yes, it doesn’t work!
I love you!
You are great and your ideas are great!
Thank you!
just simply incredible and always the B.E.S.T 🙂
love it 😉
Doesn’t appear to work in IE
Version?
Probably 6
Hi Mary,
I want to say you: i love your work !
But i have one question can you help me on a problem on my website? ( mainmenu/submenu)
If you are available please contact me. i have modify your http://tympanus.net/Tutorials/SlideDownBoxMenu/ and adapt it on my site, but my mainmenu go away when my mouse go on submenu.. i’m not a pro of javascript. So please if you have the time, help me ^^ or put me on the way.
Thanks again for you exceptionnal articles
hi morgan,
your website?
Very helpful we can use it anywhere thanks buddy
Superb and cool. Definitely we are going to use, but IE cries :(. Thanks a lot for sharing.
It works fine for me (bit slow when using google chrome)and will come in handy,thanks for sharing this.
Mary Lou. I had to come back. You made me laugh when I too a peek in the “Images” folder. You’re funny. ; )
a song for you mary lou 😛
like it, works good in chrome, also win 8.
for me prefer firs two type of animation.
Doesn’t work on Chrome v28 Beta on Windows 8! Please fix it!
@Rajanand
here : http://morganwahbi.com
My problem is when you go on mainmenu and go on submenu, the first menu go away.
Mainmenu is in CSS3 and submenu in JS. but i don’t know how to do the same effect of the mainmenu in jquery or JS.
ps: sorry for my english
Thanks Mary, these effects are very cool. I am designing an application for kids and will definitely use these effects! They should be exciting for kids too!
Awesome 🙂
Beautiful work, thank you!
really good piece of work.
wow great simple effects!! definitely going to try some of these out and try think of some more of my own!
Great! Thanks for sharing.
This does work in IE. 😀
Now that is some very cool work right there! 🙂
Great Work , Very cool icon’s
I see most often you are playing around with CSS pseudo element “:after” and “:before”
and with CSS3 animation/transitions, that is cool
I could see a potential use this for a creative website , but is this effect recommendable to be used for mobile touch event, like the effect #8
Hey Mary, thanks for sharing amazing Icon hover effects. CSS3 change the way of designing. Great !
-Mike
Hi there, I love the article, I am trying to recreate this on a new font, but am having difficulty getting the font to display correctly.
Could you please explain to me how the css entry
.hi-icon-screen:before {
content: “\e00a”;
}
is getting for content from the font files, and how I can lookup how to do this on another font file.
Many thanks
Mark