Simple Icon Hover Effects

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

From our sponsor: Try Mailchimp today.

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:

Mary Lou

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

Stay up to date with the latest web design and development news and relevant updates from Codrops.

Feedback 116

Comments are closed.
  1. This effect looks like windows 8, it’s so fashion nowadays. Let’s use it 😉

  2. Excellent Mary Lou !
    different options to choose and all are very atractive !!

    thanks for share,
    to favs !

  3. I have no words to say. It’s simply awesome.
    Definitely will be using this for my upcoming project.
    Mary Lou rocks!

  4. Hello,

    Suits well for “Feature Pages” and lists.

    I try to implement every tutorial of Tympanus in my projects. But it is some what critical when it comes to integrate with CMSes like WordPress.

    Could you publish a guide to help us integrate Tympanus articles like this or any other articles at Codrops with WordPress?

    Everytime, I try to convert these to WordPress, I stuck somewhere with no solution and help. Hope some day you could help us with a guide or something that help us to turn the snippets as WordPress plugins. I ‘ve asked about this earlier.

    Thanks!

  5. I see no hover effect in the demo ‘4’. As there is no explanation about it in the tutorial, I think I am missing something.

    • Like I mention in the article and also in the demo this effect does not work in Firefox (assuming that you are using this browser). Cheers, ML

  6. Everything Mary Lou upload is amazing. Thanks for this nice flat icons hover effects. For sure will be used in my next project.

  7. I’m interested in trying to get text to show just below the buttons and keep the listing left-to-right. Any tips? Thanks!!

  8. How can i call the mouse over event from the Icon if I want to use Text next to the Icon, in order to active the effect. Thanks for sharing 😉

  9. Nice work as always Mary.
    Is there a better way to make make a more noticeable effect on a touch devices when typically hover doesn’t exist?

    Rather than
    Finding & Replacing :hover
    into :active

    or adding extra classes. ie:

    /* Effect 1a */
    .no-touch .hi-icon-effect-1a .hi-icon:hover {}

    into

    /* Effect 1a */
    .no-touch .hi-icon-effect-1a .hi-icon:hover, .no-touch .hi-icon-effect-1a .hi-icon:ACTIVE {}

    • Hi Phil,
      thanks a lot! That’s a very interesting question. I think that in some cases you actually can simply use :hover if you want an effect to show ‘on tap’ on some devices: Icon Hover Effects without .no-touch
      It’s always important to see when this makes sense, i.e. is this a link to another page, or is it some kind of action?
      What do you think?
      Cheers, ML

  10. Great as always.

    I know it doesn’t make sense, but you can make it work on touch devices by adding

    ontouchstart="this.classList.toggle('hover');

    on icon. Maybe those icons are not links and you want a nice effect on them…