Create a Circle Social Button in CSS3

Hi, everybody! Here is another tutorial, this time a CSS3 tutorial. I’ve been experimenting with CSS3 these days and I’ve learned a lot of cool things that can be done with it. So, in this tutorial you’ll learn how to create a circle social button with shadows and gradients using CSS3. I have created four social buttons using this technique: Twitter, Facebook, Dribble and RSS.

You can view a demo of these buttons from the link below:

VIEW DEMO

The Idea

I learned how to create shadows and gradients in CSS3 from this article: http://www.red-team-design.com/just-another-css3-menu. After that, I watched these free .PSD circle buttons here: http://www.purtypixels.com/clean-social-circles/ and decided to try to convert them in CSS3. The only JPG images used here are the logos (twitter, dribble, ecc.) of the buttons. All the shadows and gradients are made using CSS3 so, if you open these buttons in Internet Explorer 7 for example, you’ll only see some gray rectangles with logos in the center.

After this introduction, let’s begin the tutorial. Note that I’ll not show here the entire HTML/CSS3 code. If you need the full code, you can download it at the end of this article.

The HTML

The HTML part is very simple as you can see:

<div class="buttons">
	<a class="twitter" href=""><img src="images/twitter.png" /></a>
	<a class="facebook" href=""><img src="images/facebook.png" /></a>
	<a class="dribble" href=""><img src="images/dribble.png" /></a>
	<a class="rss" href=""><img src="images/rss.png" /></a>
</div>

The CSS

Step 1

Apply a background to the body, center align the buttons and set a top margin of 160 pixels to the .buttons class.

body {
	text-align: center;
	font-family: Arial;
	background: #f8f8f8 url(images/bg.jpg);
}
 
.buttons {
	margin-top: 160px;
}

Step 2

Apply a right margin of 30 pixels for every button and a width and height of 64 pixels. Also set the line-height to 64px and the background color  to #eaeaea. Use linear-gradient (from #f6f6f6 to #eaeaea) to apply a gradient to the buttons. Use a border-radius of 32 pixels to make the buttons circular. Use box-shadow for adding the shadow. You can find more about the box-shadow property here: http://www.w3schools.com/cssref/css3_pr_box-shadow.asp.

Note in the code the properties from the specific vendors, -moz-, -webkit-, -ms-.

.buttons a {
	margin-right: 30px;
	width: 64px;
	height: 64px;
	display: inline-block;
	position: relative;
	line-height: 64px;
	background-color: #eaeaea;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#f6f6f6), to(#eaeaea));
	background-image: -webkit-linear-gradient(top, #f6f6f6, #eaeaea);
	background-image: -moz-linear-gradient(top, #f6f6f6, #eaeaea); 
	background-image: -ms-linear-gradient(top, #f6f6f6, #eaeaea); 
	background-image: -o-linear-gradient(top, #f6f6f6, #eaeaea);
	background-image: linear-gradient(top, #f6f6f6, #eaeaea);
	-moz-border-radius: 32px;
	-webkit-border-radius: 32px;
	border-radius: 32px;
	-moz-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
	-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
	box-shadow: 0 1px 1px rgba(0, 0, 0, .25), 0 2px 3px rgba(0, 0, 0, .1);
}

Step 3

Now we’ll style the active state of the button, when it gets pushed, to make it look real. For this, use linear-gradient with reversed colors, from #eaeaea to #f6f6f6. Also move the button 1 pixel down (top: 1px).

.buttons a:active {
	top: 1px;
	background-image: -webkit-gradient(linear, left top, left bottom, from(#eaeaea), to(#f6f6f6));
	background-image: -webkit-linear-gradient(top, #eaeaea, #f6f6f6);
	background-image: -moz-linear-gradient(top, #eaeaea, #f6f6f6); 
	background-image: -ms-linear-gradient(top, #eaeaea, #f6f6f6); 
	background-image: -o-linear-gradient(top, #eaeaea, #f6f6f6);
	background-image: linear-gradient(top, #eaeaea, #f6f6f6);
}

Step 4

Now we’ll create a bigger circle around the buttons that will change color when hovered, as you can see in the demo page. For this, we’ll use the ::before CSS3 pseudo-element. Apply an absolute position to the ::before element (top, right, bottom, left) of -8 pixels, an #eaeaea background color, a border radius of 140 pixels and an opacity of 0.5.

.buttons a::before{
	content: '';
	position: absolute;
	z-index: -1;
	top: -8px;
	right: -8px;
	bottom: -8px;
	left: -8px;
	background-color: #eaeaea;
	-moz-border-radius: 140px;
	-webkit-border-radius: 140px;
	border-radius: 140px;
	opacity: 0.5;		
}

Step 5

Apply a top position of -9 pixels to the ::before element when it is in active state. Apply an opacity of 1 to the ::before element when it’s hovered.

.buttons a:active::before {
	top: -9px;
}
 
.buttons a:hover::before {
	opacity: 1;
}

Step 6

Now, for each button, apply a specific color to the ::before element when it’s hovered.

.buttons a.twitter:hover::before {
	background-color: #c6f0f8;
}
 
.buttons a.facebook:hover::before {
	background-color: #dae1f0;
}
 
.buttons a.dribble:hover::before {
	background-color: #fadae6;
}
 
.buttons a.rss:hover::before {
	background-color: #f8ebb6;
}

Step 7

Set the vertical-alignment of the logo for each button.

.twitter img {
	vertical-align: -7px;
}
 
.dribble img {
	vertical-align: -12px;
}
 
.facebook img {
	vertical-align: -12px;
}
 
.rss img {
	vertical-align: -7px;
}

That’s all

You can download the full code from the link below and you can use these buttons in personal and commercial projects. You can also download the PSD version from the link at the beginning of the article. I hope you enjoyed this tutorial and I would like to know your thoughts about it.

Don’t forget to follow me on Facebook and Twitter for other tutorials and freebies.

VIEW DEMO or DOWNLOAD:  CSS3 Circle Social Buttons (13515 downloads)