Ready To Use CSS3 Rollover Animated Social Media Icons

There are multiple ways to add social media to your weblog or website, you can either add it directly as images and link it to your social media page or profile, you can also use plugins to display them without any coding if you are using WordPress.

But if you want to show it with some impressive animation you will normally have to use JavaScript and jQuery but that will be a hard way to go, so here I’m going to show you how you can add social icons with little animation just by using simple HTML and CSS3.

Here are some examples you can use them simply by changing the urls…//

1. Triangular Icon With Fade Effect

This is a very simple animation, it is just changing the opacity on rollover and rollout. When you rollover any of the items the color of the icons become darker that before. This example require only one image, it can be colorful or gray as you wish.

CSS For This

HTML For This

2. Rectangular Icon With Fade Effect

This is another easy animation but it is using two image one color another gray so it will transition from gray to color.

CSS For This

HTML For This

These are the two examples I think are the simplest one, I will show you some more complex example in few. So, please let me know if you have suggestion or question regarding this topic, by leaving a comment below.

2 Responses on Ready To Use CSS3 Rollover Animated Social Media Icons|

  1. Pramod says:

    This is awesome mate . I would be testing this out on one of my blogs . Thanks for sharing the code with us .


  2. Aras Androck says:

    I’ve always wanted how to try this icon. Now I know how. Thanks.

Leave a Reply to Aras Androck Cancel reply

Your email address will not be published. Required fields are marked *

CommentLuv badge

Pin It on Pinterest