A set of simple round icon hover effects with CSS transitions and animations for your inspiration.
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.
Please note: this only works as intended in browsers that support the respective CSS properties.
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!
Previous:
BookBlock Revised
BookBlock Revised
Beautiful, clean and so simple, great work !
Thanks again.. here’s my site using the technique:
http://designnut.co.uk/
You did really nice job …i want to know how you loaded your own font-family :Arty and how to do that? Please let me know
Fantastic demo but… How can I personalize the icon on the button with ones created by myself?!?!?!?!?!?!
amazing, i like and hover effect is very nice
Very nice!
What code would I use to implement a few of these on my website?
oh! you guys are the best amazing hover effect clean and so simple, great work !
Simple is always the best.
Hi. I’m new to web designing. Downloaded the zip file and i got almost how it works. But i couldn’t get how the icons are loaded and the few lines of css codes in component.css. Somebody please help me.
Codes are the one’s that look like this.
.hi-icon-mail:before {
content: “\e00d”;
}
I was not able to figure that out.
I didn’t understand what this class is doing 🙁
class=”hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a”
.hi-icon-effect-6 .hi-icon
Mary Lou I would like to set the hover event to an outer container. So that when you hover over the text and headings in the container the icon effect is activated.
Worked it out
Replace
.hi-icon:hover:after {
with
.outer-container:hover .hi-icon:after {
Love these effects!
Hi, I love these effects and your tutorials in general. Thanks a lot for taking the time to make them. I’m going to try and combine effects #3 and #4 🙂 Shame about FF
These are really cool but not working in Safari, I don’t know why…
hello im just a beginner in web designing and i was wondering.. how can i replace the icons into an image i made on my own?
because i made some custom icons for my project website.. if its not much of a trouble, please help me with it 🙂
would someone kindly tell me how to change the icons, thanks!
I see a lot of people asking how they can create their own icons. If you are not familiar with the benefits of font icons I implore you to do a little research on google because they rock! There is an amazing online tool called Fontastic where you can upload your own svg files (scalable vector graphics) and spit out a custom font to display on your site. It’s incredibly easy to use and provides you the code to implement your font which looks nearly identical to the format Mary Lou uses here. This should make it easier for you all to incorporate it into this example especially if you are a newbie to custom fonts to begin with. Hope this puts you all in the right direction, enjoy!
Animation 8 is not working in IE9 browser and Safari browser.
URL: – http://tympanus.net/codrops/2013/05/30/simple-icon-hover-effects/
If you get any solution please let me know its very urgent for me Thanks in advance 🙂
Some very useful and awesome effects..Can i use them with the font-awesome icons..Can you please tell how this can be achieved.
Thanks.
Very nice, thanks
this is awesome tutorial. I want to use font awesome can anyone tell me how can i do it