21 CSS Social Share Buttons

March 7, 2025

We have listed attractive CSS Social Share Buttons in this post. Popular platforms Facebook, Twitter, and LinkedIn increase user engagement by allowing seamless content sharing.

A collection of buttons from codepen that are completely free for you to use, these buttons can be customized with hover effects, animations, and responsive designs, making the website visually appealing to the user.

Social Media Icons

Interactive social media buttons with hover effects for enhanced engagement.

Preview

Codepen Code

Author: Marty

Published: May 22, 2020

Made With: HTML, CSS

Share Button Hidden Icon

Interactive share button reveals icons upon click, enhancing user engagement.

Preview

Codepen Code

Author: alphardex

Published: September 1, 2020

Made With: HTML, CSS (SCSS)

Share Button

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

Preview

Codepen Code

Author: bertdida

Published: October 11, 2018

Made With: HTML, CSS (SCSS)

Social Media Icons - Floating

Floating social media icons with hover effects for enhanced user interaction.

Preview

Codepen Code

Author: Stockin

Published: September 27, 2018

Made With: HTML, CSS

3D - CSS Social Tiles

Social media buttons with 3D hover effects, enhancing user engagement.

Preview

Codepen Code

Author: Stockin

Published: September 29, 2018

Made With: HTML, CSS

Social Share Button

Cool animation, like the idea behind it - literally.

Preview

Codepen Code

Author: Yancy Min

Published: August 6, 2018

Made With: HTML, CSS

Share Button

Simple and unique share button in HTML and CSS.

Preview

Codepen Code

Author: Veronica

Published: June 16, 2018

Made With: HTML, CSS

Media Icons

Social media icons with hover and inverse actions.

Preview

Codepen Code

Author: matt henley

Published: October 20, 2018

Made With: HTML, CSS (SCSS)

Social Media Icons Share

Interactive social media icons that reveal submenus with sharing options upon hover, enhancing user engagement.

Preview

Codepen Code

Author: Chandra Shekhar

Published: January 10, 2018

Made With: HTML, CSS (SCSS)

Social Dark

Presents a set of social media buttons with a dark-themed design, featuring hover effects that enhance user interaction.

Preview

Codepen Code

Author: Metty

Published: November 18, 2018

Made With: HTML, CSS

Share Icons With Hover Effects (All CSS)

Social media share icons with hover effects implemented entirely using CSS.

Preview

Codepen Code

Author: Charlie Marcotte

Published: July 26, 2017

Made With: HTML (Pug), CSS (Sass)

Social Buttons With Tooltips

Interactive social media buttons that display tooltips on hover, enhancing user engagement.

Preview

Codepen Code

Author: Luis Espinosa

Published: August 29, 2016

Made With: HTML (Pug), CSS (SCSS)

Stylish Social Buttons

Stylish social buttons with smooth animations, inspired by a Dribbble shot.

Preview

Codepen Code

Author: Chris Deacy

Published: March 20, 2015

Made With: HTML (Pug), CSS (Stylus)

SVG Social Icons

Just testing some SVG icons using 'symbol'.

Preview

Codepen Code

Author: Kevin Dewar

Published: March 14, 2015

Made With: HTML, CSS (SCSS)

Social share button

Pure CSS social share button.

Preview

Codepen Code

Author: Kirill Kiyutin

Published: April 5, 2016

Made With: HTML (Pug), CSS (Sass)

Slide-out social buttons

Showcases slide-out social media buttons that reveal on hover, enhancing user engagement with smooth transitions.

Preview

Codepen Code

Author: Steven Schobert

Published: November 20, 2014

Made With: HTML, CSS (SCSS)

Share buttons

Applies styles to the buttons, including size, color, and hover effects, to create a cohesive and interactive design.

Preview

Codepen Code

Author: Wade Muller

Published: July 1, 2014

Made With: HTML, CSS

Sliding share buttons

Just a test for share buttons (works in chrome, safari, firefox and IE10).

Preview

Codepen Code

Author: Oz

Published: January 17, 2013

Made With: HTML, CSS (SCSS)

Daily UI #10: Social Share

This design offers a visually appealing and user-friendly method for integrating social media sharing options into a website.

Preview

Codepen Code

Author: Leena Lavanya

Published: February 25, 2016

Made With: HTML, CSS, JS

Simple Share Button

Hover it and see what will happen next.

Preview

Codepen Code

Author: Larry Geams Parangan

Published: December 3, 2013

Made With: HTML, CSS

Social Media icon reveal with transition

This design is ideal for adding an interactive and modern touch to websites, enhancing user engagement with social media links.

Preview

Codepen Code

Author: Stefan Göllner

Published: June 17, 2013

Made With: HTML, CSS (SCSS)