A few months ago I wrote about how to add color buttons to your Genesis-powered website. 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 be asking yourself where you can use something like the social media buttons. You might implement these in the top right section of your header or in your sidebar.
Creating the Social Media Buttons
In your text editor, all you need to do is wrap the text in a div with a class applied to it. Here’s some sample HTML, along with the CSS required for the colored content boxes.
wow… that is power of CSS. This method for sure is better than usual image background technique as it does not involve load of image and ofcourse those extra http requests.
I guess, we can make them more jazzy looking by adding logo on left side. Like, how about showing Twitter bird on button with “Twitter” text. What say?
Yup, adding a logo on the left side would be a great idea. But you’ve to use image. But no one says you cannot use image sprite
Here’s a modified example which uses Twitter Bootstrap and FontAwesome: http://jsfiddle.net/Alastair/uXATR/
Hi Brian
Wery nice but in IE dont take the gradient so maybe you should add solid background for old IE something like
a.button-dribbble {
background:#ea4c89; /* old browsers */
background:-moz-linear-gradient(top, #ea4c89 0%, #c93764 100%); /* firefox */
background: -webkit-linear-gradient(top, #ea4c89, #c93764); /* webkit */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#ea4c89′, endColorstr=’#c93764 ‘,GradientType=0 ); /* ie */
border: 1px solid #c93764;
text-shadow: 0 -1px -1px #9d2849;
}
Not tested but I think should be something like that
Ugg it’s so annoying spending so much extra time support the IE browsers…really wish they weren’t so bad.
As always, beautiful bode and beautiful results!
That was fun to play around with, GREAT timing for a button in my sidebar.
Hi,
Don’t forget unprefixed property value (like linear-gradient).
Nice work
Geoffrey
My heart goes pitter-patter whenever I see a “code-snippet” email from you…
Opened this tutorial first in IE 9 and was so disappointed with the buttons.
Then opened in Chrome… what a difference.
And the moral of the story is… move over to Chrome!
Thanks for the tut and the code Brian.
CSS is simpler than inserting an image as the background. Thanks for the tip.
Also, I assume it is also faster loading?
Sharing this great stuff is going to make me dangerous Brian!
Thank you for your generosity! – Theresa
Being dangerous is usually a good thing, Theresa.
Thank you Brian! Now to get rid of shortcodes and plugins for good!
Hey Brian as always good information my friend. These will come in handy and not very hard to apply thanks so much Brian.
Perfect timing- I have recently been looking into other alternatives for css buttons. Love that this is so lightweight and easy to implement.
It’s like you read my mind!
I did read your mind Heather, didn’t you know?
wow nice. Just changed little and using as demo button on my blog
Wah! Handy code
Really an useful one. Going to use these in my Students blog 
Great information Brian
Hey Brian thanks for this wonderful post…..All I have to say is Great Great Great…
Thanks Brian for a great buttons.
I turned this into a plugin (your blog is a great source of plugin ideas): Check it out at http://wordpress.org/extend/plugins/standout-css3-buttons/
Good stuff, thanks for sharing and well done on the plugin!