in Playground

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

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

View demo Download source

Previous:
Next:

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.

View all contributions by

Website: http://www.codrops.com

Related Articles

ImageGlitchEffect_Featured

CSS Glitch Effect

Freebie_Drones_Featured

Freebie: Drone Icons (AI, Sketch, SVG, PNG, Iconjar)

OrganicShapeAnimations_Featured

Organic Shape Animations with SVG clipPath

Receive our bi-weekly Collective or official newsletter right in your inbox.

Which newsletter would you like to receive?

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

    • 8

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

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

  9. 10

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

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

    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?

Comments are closed.