How to Create Social Media Buttons With CSS3 Gradients

There are a number of ways to showcase links to your social media profiles on your website or blog, and today I’d like to teach you how to create social media buttons using CSS3 gradients.

Below are the buttons that are included in this tutorial:


You might wonder where you can use something like the social media buttons. These can be placed directly into a post or page, or you can also place them into a text widget in the top right section of your header or in your sidebar.

If your site is running the Genesis Framework, this is especially easy to do.

Creating the Social Media Buttons

Below is sample HTML and CSS that can be used for the social media buttons.

Global Styles

Dribbble Button

Facebook Button

Google+ Button

LinkedIn Button

Pinterest Button

RSS Button

Tumblr Button

Twitter Button

If you are viewing this tutorial post via email, you will see an unformatted version of it. To have a better experience, please visit the official post.