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 thoughts on “Ready To Use CSS3 Rollover Animated Social Media Icons

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

CommentLuv badge