Hi! I have a quicktip for ya. How about some really awesome press-able social media buttons using pure CSS3? Sounds cool right… well that’s what’s in store for you today. I’m going to to show you how to create some really cool buttons that you can place on any project, so let’s get started!~

Step 1 Punching out some HTML Markup

The markup here is very simple, clean and only requires a few lines of code.

For our main class, we’ll be using a .container which is only used if you want yours to look exactly the same as this tutorial. We use it to place the buttons in the center of our canvas.
Next we will use a span to wrap our button and use the class, .button to create some spacing using a margin in our CSS file.
Lastly we’ll simply add a link, an icon and some text to put on the button.

        
            Like It
        

        
            Tweet It
        

        
            Email
        
    

That’s all there is to the HTML markup for the CSS3 buttons and you should now have something like this…

Step 2 Creating some Awesome Styles!

The first thing we’re going to add is a body with a nice blue gravel background which can be found in the source files. Then we’ll put a color on our links and style the container to center our buttons on the canvas using margin: 0 auto.
None of these three styles are required when putting the buttons on your own project but you may wan to create a specific link style for them, and to do that you could target it using .button > a

body{
    background: url(../images/bg.jpg) repeat 0 0;
}

a{
    text-decoration: none;
	color:#333333;
}

.container{
    width: 420px;
	margin: 10% auto 0; /* buttons pushed from the top by 10% */
}

Now let’s create some spacing between the buttons like so…

.button{
    margin: 8px;
}

“Style your buttons in a way that users will want to press them..”

Now that we have some nice spacing, we can start to style our buttons in a way that users will want to press them.

By creating a nice gradient and a box shadow, we can make the buttons pop a little making them more clickable. Then we add some padding to the top, bottom and sides making the buttons much easier to read.

.button a{
	font-family:font-family: 'Arvo', arial, serif;;
	font-size:16px;
	background: #ffffff; /* Old browsers */
	background: -moz-linear-gradient(top, #ffffff 0%, #dfdfdf 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(100%,#dfdfdf)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#dfdfdf',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #ffffff 0%,#dfdfdf 100%); /* W3C */
    -moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	-moz-box-shadow: 0 3px 4px -1px #464646;
	-webkit-box-shadow: 0 3px 4px -1px #464646;
	box-shadow: 0 3px 4px -1px #464646;
	padding: 6px 12px;
}

Now let’s go ahead and flatten the button a little bit to make it look halfway pressed in by using the :hover selector. We’ll also use the :focus selector so that we can retain these styles instead of having to duplicate the code for that state.

.button a:hover, .button a:focus{
    background: #dfdfdf; /* Old browsers */
	background: -moz-linear-gradient(top, #dfdfdf 0%, #ffffff 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#dfdfdf), color-stop(100%,#ffffff)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dfdfdf', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #dfdfdf 0%,#ffffff 100%); /* W3C */
	-moz-box-shadow: 0 1px 1px 0 #666666;
	-webkit-box-shadow: 0 1px 1px 0 #666666;
	box-shadow: 0 1px 1px 0 #666666;
}

The button on the right is what the hover state should look like.

After creating the hover effects, we’re going to add a bit of inset to the buttons when a user clicks the mouse making it appear like the user pressed the button into the background. In this technique we need to use two shadows and to do that we simply place a comma between each one. Support for more than one shadow

.button a:focus{
    -moz-box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
	-webkit-box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
	box-shadow: 2px 3px 2px -1px #464646 inset, 0 1px 1px 0 #666666;
}

At this point you should have something like the image below with the inset button or focus state (the example left button).

Lastly we put a right padding to create some space between the icons and the button text, then we needed to move the icon down to align it and to do that without disturbing other elements, the best solution is to put a position of relative to keep it contained within .button and then push it down from the top by 2 pixels. By using top instead of padding-top or margin-top, we only affect the image instead of the entire button.

.button a > img{
	padding-right: 8px;
    position: relative;
    top: 2px;
}

Ok, that’s it for the styling and you should end up with something like this…

If yours doesn’t look exactly like the image above, please go back and check your work.

And That’s All She Wrote…

Great job! You’ve created some really awesome CSS3 buttons that make users want to take action. Thank you for participating and I sincerely hope you learned something new and valuable in this lesson.
Stay tuned for more tutorials to come your way. Also you can check out some of my products on the Envato marketplaces just below the author profile.

Please leave any questions or comments below.