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:
1 2 3 4 5 6 7 | < 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:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | .hi-icon-effect -6 .hi- icon { box-shadow : 0 0 0 4px rgba( 255 , 255 , 255 , 1 ); transition : background 0.2 s, color 0.2 s; } .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 2 s linear infinite; } @keyframes spinAround { from { transform : rotate ( 0 deg) } to { transform : rotate ( 360 deg); } } |
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!
0 comments:
Post a Comment