Customizing JetPack Share Buttons
First, thanks to Ruben Alamina for a bulk of the CSS code in this tutorial. I’ve modified the styling to my liking and to also make it a bit cleaner and account for a few priority issues I had when using it, such as the background-image importance included in the JetPack CSS. I’ve also removed a few of the share buttons Ruben styled in his code since I don’t use those buttons (the code below is the CSS code I use for EngageWP).
Install & Configure JetPack
The first step in the process is to obviously install JetPack. I’m assuming that you already have JetPack installed and setup, else you probably wouldn’t be looking for ways to customize the sharing buttons.
Customize the JetPack Share Buttons CSS
You can copy and paste the code below into your style.css. If you aren’t already, make sure you’re using a child theme so your styling won’t be erased when you update your theme. If you aren’t using a child theme, at least use any built-in custom CSS editor your theme provides (or use the CSS Editor in JetPack).
UPDATE (May 14, 2014): I updated the Jetpack Social Buttons CSS to include the “More” button that displays additional buttons. It was a lot smaller than the primary buttons and I wanted to make everything even. I also included a link to the raw code to make it easier to copy.
UPDATE (June 1, 2014): After a recent JetPack update, some of the CSS stopped working and some things didn’t look right. I’ve updated the CSS to account for these changes and return everything to as it was before the update.