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
Links
Made with
- HTML / CSS
About a code
Share Button Hover Effect
Compatible browsers: Chrome, Edge, Opera, Safari
Responsive: no
Dependencies: font-awesome.css
Links
Made with
- HTML / CSS
About a code
Neumorphism Social Share Button
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -
Links
Made with
- HTML / CSS (SCSS)
About a code
Share Button Float Icon
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Responsive: no
Dependencies: -


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


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: -


Links
Made with
- HTML (Pug) / CSS (Sass) / JavaScript
About the code
Social Share Button UI
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: -


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


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


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: -


Links
Made with
- HTML / CSS (SCSS)
About the code
Social Media Icons Share
Compatible browsers: Chrome, Edge, Firefox, Opera, Safari
Dependencies: font-awesome.css


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


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


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


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


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: -