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
View demo Download Source

From our sponsor: Market smarter with Mailchimp's automated messaging tools.

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:

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

CustoCursors_featured

Custom Cursor Effects

ReactSlider_featured

React Slider with Parallax Hover Effects

AkaruCaseStudy_featured

Case Study: Akaru 2019

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

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. hi Mary, I hope this comment is reaching you. I would like to combine this icon efefct with the dots on your other script “Fullscreen Slit Slider” (the one with animals icons). In that script, I would like to substitute the dots with the animal icons, and have the hover effect indicated on this script. Can you plkease help?

  2. Hi Mary
    thank you very much for your tutorials. Always so impressive !!
    Do you think that your effects would be available with fontawesome icons ? and if yes, how-to do it ? I am stuck on it.

    Thanks again.
    Olivier

  4. The effects don’t work in Firefox 29.0a1 (2014-01-19). I also don’t see the navigation buttons at the top (1 2 3 … 9).

  5. Hi

    I was wondering, is it possible to use your own icons and create these effects, or can you only use the icons provided by the font?

  7. Why not?

    a {width: 100px; height: 100px; display: block; background: #ccc; border-radius: 50%; transition: all 0.2s linear;}
    a:hover {background: #000; transition: all 0.2s linear; box-shadow: 0 0 0 5px #fff, 0 0 0 10px #000;}


    <a href="/"></a>

    • Hi Lashchevsky, yes that effect works but for some reason when I view the demo in the current versions of Firefox, Chrome and Opera very few of the effects on the demo work, almost none.

  8. Great Tips and tricks. Thanks for the awesome effective buttons idea 😉

  9. The spin around effect can be done without keyframe animations by simply using transformation and transformation-ease property:

    img.myicon{
    vertical-align: middle;
    }

    a:hover img.myicon{

    transform:rotate(36000deg);
    -webkit-transform:rotate(36000deg);
    transition: all 15s ease;
    -webkit-transition: all 015s ease;
    -moz-transition: all 15s ease;
    -o-transition: all 15s ease;
    background:#ff6600;
    border-radius:15px;

    }

  10. My previous comment would give a very fast spinning icon for a longer period of time but for general use the code would look something like:


    a:hover img.myicon{
    transition: all 30s ease;
    transform:rotate(2000deg);
    -webkit-transform:rotate(2000deg);

    }


    Though it will be not infinite, the ease in / ease out effect doesn’t look bad either and also the code is very simple to remember.
    I don’t know if we can use simple transformation for a certain element for a given duration without using the ease property.

  17. Why does the a:link’s in the nav show on only one of my computers? The one that doesnt show them has a bigger screen, but i can figure out why it only shows on the smaller screen. Anyone know?