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:

DribbbleFacebookGoogleLinkedInPinterestRSSTumblrTwitter

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.

Comments

  1. Great looking buttons and thanks for the reminder about using CSS linear gradients.
    Looking forward to more technical posts here on StudioPress.

  2. I’ve used these before, love them! Thanks, Brian.

  3. Nice tutorial. I will try to implement this in one of my sites :)

  4. Thanks so much for this tip! I just finished implementing one of your other tips this morning on how to add message boxes to websites running on Genesis.

  5. Outstanding, Brian. I always much prefer pure CSS for buttons. The addition of a gradient is a nice touch!

  6. Nice set of Buttons. Can you tell me how to get share counts like in your buttons?

  7. Quite ironic really that when css3 with it’s transitions, rounded corners etc is being brought in that the fashion trends go to clean squared lines and flat colours!

  8. I second that!! Thanks.

  9. Great tutorial. This is what I’m looking for. The simple and fastest method to create cool button using CSS gradients. Thank you Brian.

  10. Looks amazing. Time to learn more about CSS gradients.

  11. These are a great addition to the StudioPress commitment to being a premier resource for web design, Brian. Do I simply add these to the CSS file?

  12. Hi Brian,

    Nice tips. I was missing all the frequent design and code tips you were doing months ago.

    It would be even greater if you share the social-media-buttons.htm file to add the sharing functionallity to all that buttons :)

    Regards.

  13. Nice post Brian, your codes help users a lot.

  14. Very nice, clean and simple. But why not use the same code and add font-awesome icons to them? Wouldn’t that make the different social media quicker to recognize?

  15. Brian

    Good post and back to what you do best. Looking forward to more technical posts – esp now I have written my first site plugin(!). I have suggestion re tutorial : Customised “Filed under section so that categories and ( maybe even tags) get their own markup such as coloured boxes or even image replacements

  16. Thank you Brian,

    I love the coloured gradients, and like Jack suggested combined with Font Awesome, this would be pretty special. Nice one!

  17. Hi Brian, I used this (or possibly another tutorial you gave) to place social media buttons above my content. Worked a treat, but it now places social media buttons above and below my archives too, which is a bit of an overkill. http://www.praisedancetoday.com/christian-praise-dance-articles/ is there an easy way to remove one of these from the archives page so just one set of icons appear?

    • It’s possible that the code I showed in my tutorial included a function to purposely put the icons at the top. See if you used that, and simply remove it.