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

From our monthly sponsor: monday.com, a new way to manage your work! Meet the new visual project management tool.

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:

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

GridLayoutMotion_featured

Grid Layout with Motion Hover Effect and Content Preview

InteractiveRepulsionEffect_featured

Interactive Repulsion Effect with Three.js

FullscreenLoop_featured

Fullscreen Hover Loop Effect

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

      You did really nice job …i want to know how you loaded your own font-family :Arty and how to do that? Please let me know

  3. 4

    Fantastic demo but… How can I personalize the icon on the button with ones created by myself?!?!?!?!?!?!

  9. 10

    Hi. I’m new to web designing. Downloaded the zip file and i got almost how it works. But i couldn’t get how the icons are loaded and the few lines of css codes in component.css. Somebody please help me.

    Codes are the one’s that look like this.
    .hi-icon-mail:before {
    content: “\e00d”;
    }

    I was not able to figure that out.

  10. 11

    I didn’t understand what this class is doing 🙁
    class=”hi-icon-wrap hi-icon-effect-1 hi-icon-effect-1a”
    .hi-icon-effect-6 .hi-icon

  11. 12

    Mary Lou I would like to set the hover event to an outer container. So that when you hover over the text and headings in the container the icon effect is activated.

    • 13

      Worked it out
      Replace
      .hi-icon:hover:after {
      with
      .outer-container:hover .hi-icon:after {
      Love these effects!

  12. 14

    Hi, I love these effects and your tutorials in general. Thanks a lot for taking the time to make them. I’m going to try and combine effects #3 and #4 🙂 Shame about FF

  14. 16

    hello im just a beginner in web designing and i was wondering.. how can i replace the icons into an image i made on my own?
    because i made some custom icons for my project website.. if its not much of a trouble, please help me with it 🙂

  16. 18

    I see a lot of people asking how they can create their own icons. If you are not familiar with the benefits of font icons I implore you to do a little research on google because they rock! There is an amazing online tool called Fontastic where you can upload your own svg files (scalable vector graphics) and spit out a custom font to display on your site. It’s incredibly easy to use and provides you the code to implement your font which looks nearly identical to the format Mary Lou uses here. This should make it easier for you all to incorporate it into this example especially if you are a newbie to custom fonts to begin with. Hope this puts you all in the right direction, enjoy!

  18. 20

    Some very useful and awesome effects..Can i use them with the font-awesome icons..Can you please tell how this can be achieved.
    Thanks.

Comments are closed.