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: Create your beautiful portfolio website with Squarespace. 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. wow great simple effects!! definitely going to try some of these out and try think of some more of my own!

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

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

    -Mike

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

  5. Love this! I’m new to the @font-face approach. Can someone explain how you can identify the unicode character references that relate to the different icons? (i.e content: "\e001";' ) Probably a dumb question I know!

  6. Hi Mary Lou,
    Got a quick question. You have the icons to be set in the .hi-icon-mobile:before . Is there any way to change the icons that you have in there?

  7. This is so great, I had to share. A few asked if this could be done with Font Awesome. The answer is YES!!! Open the component css file and delete or comment out the @font-family declaration and associated links. Also comment out the classes for the icon set because you won’t be using them (e.g. .hi-icon-mobile:before).

    From there everything is icon-agnostic css. Load up your Font-Awesome however you like and replace the hi-icon icon classes with the Font Awesome icon classes in the anchor tag classes from the examples (e.g. icon-twitter). That’s worked for me and I couldn’t be happier.

    • I was wrong. Not working with Font Awesome. Can’t tell if I am supposed to need the js files or the default css. I’m sure others have the same questions.

  8. I can’t get this to work… The font isn’t connecting properly, so I’m getting empty boxes instead of icons.

  9. Does this work using a different icon font? I have a custom icon font that I am using but it’s not working with the tutorial. I get empty boxes as well. Is this: content:”\e001″; the code for the icon image?

  10. i could fix the icon “problem” (content: “\e001”), if anyone wants the explanation about fixing it, e-mail me.

  11. You are an absolute saint! this is wicked.. Thank you so much for this.
    I’m implementing it on my site now with my own icon / font set.. ace..

    Ill post the results

    10 outa 10 my good lady 🙂