Flashuser

  • Pin It

Create 3D Social Media Buttons with CSS3

Social media buttons are presented today on every website design. They are used to promote your business on social networks and get in return potential customers. There are plenty of free social media icons sets out there but in this tutorial I like to show you how to create custom ones with CSS3 help.

Feel free to use these buttons into your projects and create new ones having as starting point this tutorial. Enjoy!

css3-social-media-buttons-2

HTML CODE

The markup it simple. You just have to add an anchor tag. Each link has a class for color customization. Below I used an unordered list for all buttons.

<ul>
<li><a href="#" class="twitter-small">Twitter</a></li>
<li><a href="#" class="facebook-small">Facebook</a></li>
<li><a href="#" class="pinterest-small">Pinterest</a></li>
<li><a href="#" class="gplus-small">GPlus</a></li>
<li><a href="#" class="rss-small">RSS</a></li>
<li><a href="#" class="dribbble-small">Dribbble</a></li>
<li><a href="#" class="linkedin-small">Linkedin</a></li>
<li><a href="#" class="flickr-small">Flickr</a></li>
<li><a href="#" class="stumble-small">Stumbleupon</a></li>
<li><a href="#" class="vimeo-small">Vimeo</a></li>
</ul>

CSS CODE

I’ve created 2 button styles. The first one has only icons and the second one has icons with text. Here I show you how to create the first set. Let’s create the general style of the button including its general active state.

a {
	position: relative;
    color: #ffffff;
    text-decoration: none;
    font-family: 'Oswald';
    display: block;
    -webkit-border-radius: 6px;
    -moz-border-radius: 6px;
    border-radius: 6px;
   	width: 60px;
	text-align: center;
	
	-webkit-transform: translate(0, 0);
	-moz-transform: translate(0, 0);
	transform: translate(0, 0);

	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-ms-transition: all .2s ease;
	-o-transition: all .2s ease;
	transition: all .2s ease;

height:54px;
cursor:pointer;
overflow:hidden;

font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

a:active {
   -webkit-transform: translate(0, 3px);
	-moz-transform: translate(0, 3px);
	transform: translate(0, 3px);
}

Notice the last 3 properties. They are used to hide the text. It’s a new way of doing it, instead of the old text-indent property. We used the CSS3 translate property to add a little bit of depth.

The whole 3D effect it’s based on the box-shadow CSS3 property. Here will add the background and shadow colors and the icon for the Twitter button.

a.twitter-small{
 -webkit-box-shadow: 0px 6px 0px #2695BC;
    -moz-box-shadow: 0px 6px 0px #2695BC;
    box-shadow: 0px 6px 0px #2695BC;
}
a.twitter-small{background:#2CA9E1 url("images/twitter.png") no-repeat center center;}

a.twitter-small:active{ -webkit-box-shadow: 0px 2px 0px #2695BC;
    -moz-box-shadow: 0px 2px 0px #2695BC;
    box-shadow: 0px 2px 0px #2695BC;
}

One last thing that I want to mention is the use of CSS3 :before pseudo-element when creating the big buttons. Notice the use of absolute positioning. A much more convenient way for align the icon with the text.

CONCLUSION

This is it, for now. Thank you for reading this tutorial and I hope that you find it useful. Now you can implement this buttons into your website. Share them with your friends and let me know what do you think in the comment section.

Author: Alin

Passionate about web and graphic design, photography and climbing. Follow me at Twitter , Facebook and Google+