Create a Circle Social Button in CSS3

Published on: Feb 24 2012 by Anli

CSS3 Circle Social Buttons

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.

CSS3 Circle Social Buttons - Step 1

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

CSS3 Circle Social Buttons - Step 2

.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).

CSS3 Circle Social Buttons - Step 3

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

CSS3 Circle Social Buttons - Step 4

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

CSS3 Circle Social Buttons - Step 5

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

CSS3 Circle Social Buttons - Step 6

.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;
}

CSS3 Circle Social Buttons - Step 7

CSS3 Circle Social Buttons - Step 7

CSS3 Circle Social Buttons - Step 7

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 (5246)

13 Comments to “Create a Circle Social Button in CSS3”

  1. Eugene says:

    This is really cool tutorial, ty :)
    +1 visitor to your blog :)

  2. Hey Man, I’ve been checking out your work and it’s so exceptional! Love the tutorials and I’ve learned so much from this. Keep doing what you’re doing and never stop doing what you love.

    It’d be cool to have a chat with you man, I’m looking for a web dev to help me out with some great stuff.

    Cheers,

    Javier

  3. nice :D , i like this…..

  4. djamber says:

    Thanks, it looks great.

  5. Eric says:

    How do I make the buttons stack on top of each other instead of making them stand next to each other? I tried playing around with the vertical align and margin but can’t get it

  6. Hi Eric, if I understand you well, you want the button below and not next to each other? I’m not a native speaker. If you want to have below should then be enough to play around with writing in HTML. For example, use this and then to just adjust accordingly CSS styles.

  7. Geoffroy says:

    Merci beaucoup, juste énorme !
    Thanks You ! +1 visitor

  8. Javier says:

    Your social icon don’t render well with firefox browser. I no sure what is the issue?

    I using latest version firefox browser.

  9. Dana says:

    i wanna know where the code for command to go to url link when click that button?

  10. ali says:

    i just tried this in php page but nevework :(
    r

  11. Raj says:

    Fantastic job. Thank you for the great tutorial!

Leave a Reply

*

*