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
hi Mary, I hope this comment is reaching you. I would like to combine this icon efefct with the dots on your other script “Fullscreen Slit Slider” (the one with animals icons). In that script, I would like to substitute the dots with the animal icons, and have the hover effect indicated on this script. Can you plkease help?
Hi Mary
thank you very much for your tutorials. Always so impressive !!
Do you think that your effects would be available with fontawesome icons ? and if yes, how-to do it ? I am stuck on it.
Thanks again.
Olivier
Odd, I can’t get any of the effects working except set 8 in latest Chrome on Windows.
The effects don’t work in Firefox 29.0a1 (2014-01-19). I also don’t see the navigation buttons at the top (1 2 3 … 9).
Hi
I was wondering, is it possible to use your own icons and create these effects, or can you only use the icons provided by the font?
It looks like, somehow this demo is now broken?
Why not?
a {width: 100px; height: 100px; display: block; background: #ccc; border-radius: 50%; transition: all 0.2s linear;}
a:hover {background: #000; transition: all 0.2s linear; box-shadow: 0 0 0 5px #fff, 0 0 0 10px #000;}
<a href="/"></a>
Hi Lashchevsky, yes that effect works but for some reason when I view the demo in the current versions of Firefox, Chrome and Opera very few of the effects on the demo work, almost none.
Great Tips and tricks. Thanks for the awesome effective buttons idea 😉
The spin around effect can be done without keyframe animations by simply using transformation and transformation-ease property:
img.myicon{
vertical-align: middle;
}
a:hover img.myicon{
transform:rotate(36000deg);
-webkit-transform:rotate(36000deg);
transition: all 15s ease;
-webkit-transition: all 015s ease;
-moz-transition: all 15s ease;
-o-transition: all 15s ease;
background:#ff6600;
border-radius:15px;
}
My previous comment would give a very fast spinning icon for a longer period of time but for general use the code would look something like:
a:hover img.myicon{
transition: all 30s ease;
transform:rotate(2000deg);
-webkit-transform:rotate(2000deg);
}
Though it will be not infinite, the ease in / ease out effect doesn’t look bad either and also the code is very simple to remember.
I don’t know if we can use simple transformation for a certain element for a given duration without using the ease property.
Really nice icons, great work Mary!!!
awesome!!!!!!!!!!!!!!
I’ll implement some in my themes
many thanks!
thank you very much,this is what i need And i want to how to make it
This menu’s don’t work on Ipad. How can I fixed this for Ipad?
Ok, I have a sollution: change to
Ok, I have a sollution: change the body-tag to – body ontouchstart=” “-
belo post parabens
My queen you rock as always.
Why does the a:link’s in the nav show on only one of my computers? The one that doesnt show them has a bigger screen, but i can figure out why it only shows on the smaller screen. Anyone know?
Thank you always for share your wisdom.