CSS3 Spinning Social Media Icons

Spinning Top
We all want more attention on social media, it's all just one big popularity contest and were all fighting for more followers and friends.

If you have managed to get people on your website this is a perfect place to get people to click through to your social media profiles and follow you. But when they are on your page how do you get them to click through?

On most blogs you will find the sites social media profiles in either the top right of the page or in the bottom right in the footer. This is just the common place for social media buttons. I have mine in the top right...look...there they are!

But with these being everywhere these-days how do you be a bit different and grab people's attention with your icons?

I've seen a website which use CSS3 animation on the social media icons and thought it was a great idea have a little show off before they click through to your profile.

This certain CSS animation would constantly pulse the icons drawing attention to them, this is a good idea but I found I was looking more at the icons than the content on the site. If something is drawing your attention away from the content then it's never a good thing. But I liked the idea of using CSS animation to draw attention to something.

I was going round the other web design blogs I read and saw a image slideshow with spinning images when you hover over the image this was great really grabbed my attention when I hovered over the image, so I thought this could be used for your social media icons.

CSS Tutorial

Spinning Icons

In this tutorial you will learn how you can use CSS to create spinning social media icons on the hover event. These will also be links that go through to your social media profiles.

Demo

The HTML

First we start off with our social media icons.

<div class="spinning_icons">	
		<a href="http://www.twitter.com/paulund_" class="twitter" title="twitter">Twitter</a>
		<a href="http://www.twitter.com/paulund_" class="delicious" title="delicious">Delicious</a>
		<a href="http://www.twitter.com/paulund_" class="digg" title="digg">Digg</a>
		<a href="http://www.twitter.com/paulund_" class="dribbble" title="dribbble">Dribbble</a>
		<a href="http://www.twitter.com/paulund_" class="email" title="email">Email</a>
		<a href="http://www.twitter.com/paulund_" class="facebook" title="facebook">Facebook</a>
		<a href="http://www.twitter.com/paulund_" class="flickr" title="flickr">Flickr</a>
		<a href="http://www.twitter.com/paulund_" class="foursquare" title="foursquare">Foursquare</a>
		<a href="http://www.twitter.com/paulund_" class="linkedin" title="linkedin">Linkedin</a>
		<a href="http://feeds.feedburner.com/Paulundcouk" class="rss" title="rss">RSS</a>
		<a href="http://www.twitter.com/paulund_" class="stumbleupon" title="stumbleupon">Stumbleupon</a>
		<a href="http://www.twitter.com/paulund_" class="youtube" title="youtube">YouTube</a>
	</div>

The HTML is very simple for this, it's just a div with links to your social media profiles. I am just using my twitter profile for this example but obviously you will need to change this to your own.

The CSS3

Now we have the HTML setup we can add the CSS we will be using the a tag of anything in the spinning_icons class.

The social media image will be set as the background of the anchor tag for that we need to have a class on each anchor tag so we can use the right image for each anchor tag.

.spinning_icons a{
	width:48px;
	height:48px;
	display:inline-block;
	text-indent:-9999em;
	background-position:0 0;
	background-repeat:no-repeat;
	z-index:2000;
	overflow:hidden;
}

Here we are making the width and the height of the anchor tag 48 pixels so there will be enough room for the icon to be displayed. We add a display:inline-block so the icons will be lined up next to each other. We have text inside the anchor text for SEO reasons, but we don't want this to be displayed as we are using the images so we set a text-indent of -9999em to push the text off the screen. We make sure the background is set to no-repeat and make sure we can't see the overflowed text.

Now we can add the images to the anchor text.

.twitter{ background:url('icons/twitter_32.png'); }
.delicious{ background:url('icons/delicious_32.png'); }
.digg{ background:url('icons/digg_32.png'); }
.dribbble{ background:url('icons/dribbble_32.png'); }
.email{ background:url('icons/email_32.png'); }
.facebook{ background:url('icons/facebook_32.png'); }
.flickr{ background:url('icons/flickr_32.png'); }
.foursquare{ background:url('icons/foursquare_32.png'); }
.linkedin{ background:url('icons/linkedin_32.png'); }
.rss{ background:url('icons/rss_32.png'); }
.stumbleupon{ background:url('icons/stumbleupon_32.png'); }
.youtube{ background:url('icons/youtube_32.png'); }

We now are displaying the images in the anchor tags we can do the CSS animation to make the icon spin when we hover over them. We are not making the image spin but the anchor text wrapping the image.

.spinning_icons a:hover{
	transform: rotate(360deg);
	-webkit-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
	transition: transform 0.2s ease-out;
	-webkit-transition: -webkit-transform 0.2s ease-out;
        -moz-transition: -moz-transform 0.2s ease-out;
}

For this we use a CSS transform and make the anchor tag rotate 360 degrees to make this animate we need to add a transition which will change the transform and make the animation last for 0.2 seconds.

That's all the CSS you need to draw more attention to your social media icons by using CSS animation to spin the icons on the hover event.

View the demo to see the effect you can create.

Demo

Advertise here 50% Off

Comment