Every site should include some social buttons to increase sharing on the web. But the default sharing buttons are not that great and they’re each styled differently based on the brand of the networks.
That’s why we’ve curated this small collection of custom sharing buttons you can format and reuse on your own site. If you’re looking for beautiful sharing buttons these templates offer a great starting point.
1. Side Sharing
First up is one of my favorite techniques created by developer Michael Schofield. This fixed side-sharing social badge UI is really common on big blogs and magazine sites.
These social badges can either remain positioned at the very top near the headline or they can scroll down with the user. I haven’t found any case studies comparing the differences but I’d imagine the fixed buttons do see higher share counts. And either way they’re so well-designed that they don’t look spammy or shoehorned into the layout.
This is probably the best template to start with if you run a blog and want some custom sharing badges.
2. Image Buttons
Another popular sharing style is reposting images found on a website. This is popular with Pinterest but can work well for Facebook and Twitter, and even Google+ as well.
These image buttons are custom designs using pure CSS3 and some background logos for each one. They do not connect to any social networks yet, but the anchor links can easily be programmed for social sharing.
The design is really my focus here because they look phenomenal attached to any image. Plus the location really gives away the idea that you’re trying to encourage shares of the image itself, not just the post.
3. Toggle Shares
We’ve all seen those WordPress sharing widgets using the small sharing icon and flyout menu. After a while they can get stale, so it helps to mix it up a bit.
With this snippet you can restyle your social sharing with a custom animation and hidden menu. It’s perfect for anyone with a site that wants to encourage lots of sharing across multiple networks.
Each icon ihas been designed in pure CSS and the animation is controlled via jQuery. You should be able to just copy/paste this into any layout and get it working. It’d fit well right neaxt to an article’s headline, or even at the bottom after people finish reading. Either way it’s sure to increase social shares across the board.
4. Circle Animations
For a bit of fun animation check out these circle buttons created by Stéphane Lyver.
Each button has its own hover-to-animate effect and they can all blend perfectly into any layout. You could even change the background and icon colors so they stand out against a plain white background.
The whole thing runs on pure CSS and the icons are pulled from Font Awesome via Bootstrap.
Note that these buttons also do not connect directly to social sharing links but this can be fixed easily with the right code.
5. Simple Sharing Buttons
Short, sweet and to the point best describes these sharing buttons.
Instead they use the
If you dig into the Ionic iconset you can even find other social icons you might want to add. Plus you have full control over the styles in CSS so you can change the size, padding, font color and pretty much everything else.
6. Hidden Socials
Developer Chris Sevilleja created these hidden social buttons all with pure CSS.
Some websites use this technique to embed default sharing badges inside smaller icons. But admittedly this is a unique animation so it’s not a super common trend.
The code is real easy to setup and it all runs through CSS so you have full control. Chris even developed a similar pen for Google+ social badges.
Both code snippets are fanastic for pretty much any website and the animations run in all CSS3-compliant browsers.
7. Hover Background Colors
Now here’s a really unique social sharing setup where the background color changes based on which button you hover.
But web developer Christopher Grabinski created a pure CSS alternative that works exactly the same(in supported browsers).
I don’t think this technique would look great on a larger blog, although it may work on smaller sites or short blog posts.
8. Flyout Sharing
Developer Kyle Lavery built an amazing flyout share button that’s reminiscent of Google’s approach to material flyouts.
What’s also interesting is the raw HTML is insanely simple. It has one main share container and then uses
Absolutely one of the coolest social sharing features I’ve seen and the material design style makes it even cooler.
9. 3D Sharing Buttons
Last in my collection is this 3D design using CSS 3D transforms alongside social buttons.
Developer Fabrizio Bianchi created these buttons using pure CSS from the icons to the transform animations. The main icons are from Font Awesome and the only JS code is for embedding the buttons inside.
But overall this is a pure CSS solution that should work well on any site. Not everyone likes the 3D effect but if it suits your design then go for it.
- 10 Retro Video Games Recreated with HTML, JS & CSS
- 8 Creative CSS & JS Snippets for Creating Pixelated Backgrounds