9 Custom CSS & JavaScript Social Sharing Button Code Snippets

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.

They use simple SVG icons from the Ionicons icon set. But you don’t need Ionic or any JavaScript to get these working.

Instead they use the href value along with new tab options to open sharing links right in the browser. No JavaScript required, no clunky SVGs required.

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.

Each button has its own custom icon pulled from Font Awesome so you can even expand this set to include other related icons. I also really like this approach because it does have the JavaScript fallback for the hover changes.

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.

This does use a little JavaScript but it’s only 5 lines and not very complex. The animation magic is in the CSS which you can customize to suit your needs.

What’s also interesting is the raw HTML is insanely simple. It has one main share container and then uses div elements for the buttons. Basically 5 lines of HTML and 5 lines of JavaScript, mixed with a whole bunch of CSS, gives you this lovely effect.

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.

The post 9 Custom CSS & JavaScript Social Sharing Button Code Snippets appeared first on Speckyboy Design Magazine.