Simple Icon Hover Effects

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

By in Playground on
IconHoverEffects
Demo Code

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!

Manoela Ilic

Manoela is the main tinkerer at Codrops. With a background in coding and passion for all things design, she creates web experiments and keeps frontend professionals informed about the latest trends.

Making CSS View Transitions Easy with Velvette

Some On-Scroll Text Highlight Animations

Magical Marbles in Three.js

Stay in the loop: Get your dose of frontend twice a week

Fresh news, inspo, code demos, and UI animations—zero fluff, all quality. Make your Mondays and Thursdays creative!

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…

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

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

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

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

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

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

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

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

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

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

  43. wow great simple effects!! definitely going to try some of these out and try think of some more of my own!

  48. I see most often you are playing around with CSS pseudo element “:after” and “:before”
    and with CSS3 animation/transitions, that is cool

    I could see a potential use this for a creative website , but is this effect recommendable to be used for mobile touch event, like the effect #8

  49. Hey Mary, thanks for sharing amazing Icon hover effects. CSS3 change the way of designing. Great !

    -Mike

  50. Hi there, I love the article, I am trying to recreate this on a new font, but am having difficulty getting the font to display correctly.

    Could you please explain to me how the css entry

    .hi-icon-screen:before {
    content: “\e00a”;
    }

    is getting for content from the font files, and how I can lookup how to do this on another font file.

    Many thanks

    Mark