Collection of hand-picked free HTML and CSS social share button code examples.

  1. CSS Social Media Icons
Demo image: Share Buttons Animation Share Buttons Animation - GIF Demo

Creator

  • Ahmed Ashraf

Programming language

  • HTML / CSS (SCSS)

Information the code

Share Buttons Animation

HTML and CSS share buttons animation.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Share Button Share Button - GIF Demo

Creator

  • bertdida

Programming language

  • HTML / CSS (SCSS)

Information the code

Share Button

Inspired by Chris Gilmore’s shot on dribbble.com.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Social Share Button UI Social Share Button UI - GIF Demo

Creator

  • David Altreiter

Programming language

  • HTML (Pug) / CSS (Sass) / JavaScript

Information the code

Social Share Button UI

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Facebook/Instagram Share Button Facebook/Instagram Share Button - GIF Demo

Creator

  • Nicolas Culotta

Programming language

  • HTML / CSS (SCSS)

Information the code

Facebook/Instagram Share Button

Pretty and simple share buttons for Instagram and Facebook.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Social Share Button Social Share Button - GIF Demo

Creator

  • Yancy Min

Programming language

  • HTML / CSS

Information the code

Social Share Button

Cool animation, like the idea behind it – literally.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Share Button Share Button - GIF Demo

Creator

  • Veronica

Programming language

  • HTML / CSS

Information the code

Share Button

Simple and unique share button in HTML and CSS. Version with jQuery: https://codepen.io/onediv/pen/dkFco.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Social Media Icons Share Social Media Icons Share - GIF Demo

Creator

  • Chandra Shekhar

Programming language

  • HTML / CSS (SCSS)

Information the code

Social Media Icons Share

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: CSS Share Icons CSS Share Icons - GIF Demo

Creator

  • Charlie Marcotte

Programming language

  • HTML (Pug) / CSS (Sass)

Information the code

CSS Share Icons

Pure CSS share icons with hover effects.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Social Share Button Social Share Button - GIF Demo

Creator

  • Rob Vermeer

Programming language

  • HTML / CSS (SCSS)

Information the code

Social Share Button

Social share button that pull apart into seperate buttons.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Social Share Button Social Share Button - GIF Demo

Creator

  • Kirill Kiyutin

Programming language

  • HTML (Pug) / CSS (Sass)

Information the code

Social Share Button

Pure CSS social share button.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Slide-Out Social Buttons Slide-Out Social Buttons - GIF Demo

Creator

  • Steven Schobert

Programming language

  • HTML / CSS (SCSS)

Information the code

Slide-Out Social Buttons

Experiment with hover states and social buttons.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Simple Share Button Simple Share Button - GIF Demo

Creator

  • Larry Geams Parangan

Programming language

  • HTML / CSS

Information the code

Simple Share Button

Hover it and see what will happen next.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: