Collection of hand-picked free HTML and CSS social share button code examples from codepen and other resources. Update of December 2018 collection. 3 new items.

Related Articles

  1. CSS Social Media Icons

Author

  • Ritika Agrawal

Links

Made with

  • HTML / CSS

About a code

Share Button Hover Effect

Compatible browsers: Chrome, Edge, Opera, Safari

Responsive: no

Dependencies: font-awesome.css

Author

  • Yuhomyan

Links

Made with

  • HTML / CSS

About a code

Neumorphism Social Share Button

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Author

  • alphardex

Links

Made with

  • HTML / CSS (SCSS)

About a code

Share Button Float Icon

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Responsive: no

Dependencies: -

Demo image: Share Buttons Animation Share Buttons Animation - GIF Demo

Author

  • Ahmed Ashraf

Links

Made with

  • HTML / CSS (SCSS)

About the code

Share Buttons Animation

HTML and CSS share buttons animation.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Share Button Share Button - GIF Demo

Author

  • bertdida

Links

Made with

  • HTML / CSS (SCSS)

About the code

Share Button

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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

Author

  • David Altreiter

Links

Made with

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

About the code

Social Share Button UI

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Nicolas Culotta

Links

Made with

  • HTML / CSS (SCSS)

About the code

Facebook/Instagram Share Button

Pretty and simple share buttons for Instagram and Facebook.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

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

Author

  • Yancy Min

Links

Made with

  • HTML / CSS

About the code

Social Share Button

Cool animation, like the idea behind it - literally.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Share Button Share Button - GIF Demo

Author

  • Veronica

Links

Made with

  • HTML / CSS

About the code

Share Button

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

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -

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

Author

  • Chandra Shekhar

Links

Made with

  • HTML / CSS (SCSS)

About the code

Social Media Icons Share

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

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

Author

  • Charlie Marcotte

Links

Made with

  • HTML (Pug) / CSS (Sass)

About the code

CSS Share Icons

Pure CSS share icons with hover effects.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

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

Author

  • Rob Vermeer

Links

Made with

  • HTML / CSS (SCSS)

About the code

Social Share Button

Social share button that pull apart into seperate buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

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

Author

  • Kirill Kiyutin

Links

Made with

  • HTML (Pug) / CSS (Sass)

About the code

Social Share Button

Pure CSS social share button.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

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

Author

  • Steven Schobert

Links

Made with

  • HTML / CSS (SCSS)

About the code

Slide-Out Social Buttons

Experiment with hover states and social buttons.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

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

Author

  • Larry Geams Parangan

Links

Made with

  • HTML / CSS

About the code

Simple Share Button

Hover it and see what will happen next.

Compatible browsers: Chrome, Edge, Firefox, Opera, Safari

Dependencies: -