in Playground on

Simple Icon Hover Effects

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

From our monthly sponsor: Automate manual QA and catch visual bugs with Percy’s all-in-one visual testing and review platform.

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!

Find this project on Github

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

InteractiveRepulsionEffect_featured

Interactive Repulsion Effect with Three.js

FullscreenLoop_featured

Fullscreen Hover Loop Effect

GridLayoutMotion_featured

Grid Layout with Motion Hover Effect and Content Preview

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.

  5. This effect looks like windows 8, it’s so fashion nowadays. Let’s use it 😉

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

    thanks for share,
    to favs !

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

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

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

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

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

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

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

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