Collection of HTML and CSS Social Share Button Code Examples

Explore a collection of free HTML and CSS social share button code examples to create interactive and stylish share buttons for your website.

Share Button Hover Effect

Author:
Ritika Agrawal | August 4, 2021
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Share Button Hidden Icon

Author:
alphardex | September 1, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Share Profile Button

Author:
Mahmood Bagheri | August 23, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
-

Neumorphism Social Share Button

Author:
Yuhomyan | July 16, 2020
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Share Button Float Icon

Author:
alphardex | January 31, 2020
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Hover Me Pill Button

Author:
Joshua Ward | December 1, 2018
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
font-awesome.css
Share Buttons Animation

Share Buttons Animation

Author:
Ahmed Ashraf | October 16, 2018
Made with:
HTML / CSS (SCSS)

About a code

HTML and CSS share buttons animation.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
Share Button

Share Button

Author:
bertdida | October 11, 2018
Made with:
HTML / CSS (SCSS)

About a code

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

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Social Share Button UI

Social Share Button UI

Author:
David Altreiter | September 29, 2018
Made with:
HTML (Pug) / CSS (Sass) / JavaScript

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Facebook/Instagram Share Button

Facebook/Instagram Share Button

Author:
Nicolas Culotta | September 5, 2018
Made with:
HTML / CSS (SCSS)

About a code

Pretty and simple share buttons for Instagram and Facebook.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
Social Share Button

Social Share Button

Author:
Yancy Min | August 6, 2018
Made with:
HTML / CSS

About a code

Cool animation, like the idea behind it - literally.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
Share Button

Share Button

Author:
Veronica | June 16, 2018
Made with:
HTML / CSS

About a code

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:
-
Social Media Icons Share

Social Media Icons Share

Author:
Chandra Shekhar | January 10, 2018
Made with:
HTML / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
CSS Share Icons

CSS Share Icons

Author:
Charlie Marcotte | July 26, 2017
Made with:
HTML (Pug) / CSS (Sass)

About a code

Pure CSS share icons with hover effects.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
Social Share Button

Social Share Button

Author:
Rob Vermeer | April 14, 2016
Made with:
HTML / CSS (SCSS)

About a code

Social share button that pull apart into seperate buttons.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
Social Share Button

Social Share Button

Author:
Kirill Kiyutin | April 5, 2016
Made with:
HTML (Pug) / CSS (Sass)

About a code

Pure CSS social share button.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
Slide-Out Social Buttons

Slide-Out Social Buttons

Author:
Steven Schobert | November 20, 2014
Made with:
HTML / CSS (SCSS)

About a code

Experiment with hover states and social buttons.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
Simple Share Button

Simple Share Button

Author:
Larry Geams Parangan | December 3, 2013
Made with:
HTML / CSS

About a code

Hover it and see what will happen next.

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

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨