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.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
