Simple Icon Hover Effects

A set of simple round icon hover effects with CSS transitions and animations for your inspiration.
IconHoverEffects

From our monthly sponsor: monday.com is the last team management and design process tool you’ll ever need. Start your free trial.Advertisement

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!

Tagged with:

ML is a freelance web designer and developer with a passion for interaction design. She studied Cognitive Science and Computational Logic and has a weakness for the smell of freshly ground peppercorns.

http://www.codrops.com

Receive our bi-weekly Collective or official newsletter right in your inbox.

CSS Reference

Learn about all important CSS properties from the basics with our extensive and easy-to-read CSS Reference.

It doesn't matter if you are a beginner or intermediate, start learning CSS now.

Feedback 116

Comments are closed.
  1. 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…

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

  3. I’m using Chrome + Windows 8 and it works fine for me. Very cool, thanks for sharing.

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

  5. Superb and cool. Definitely we are going to use, but IE cries :(. Thanks a lot for sharing.

  6. It works fine for me (bit slow when using google chrome)and will come in handy,thanks for sharing this.

  7. Mary Lou. I had to come back. You made me laugh when I too a peek in the “Images” folder. You’re funny. ; )

  8. like it, works good in chrome, also win 8.
    for me prefer firs two type of animation.

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

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