50+ CSS Social Share Buttons

HTML CSS Social Share Buttons – Are you looking for HTML CSS Social Share Buttons, If yes then in this post I am going to share hand-picked HTML CSS Social Share Buttons for you. In order to increase your traffic through social media channels, it is necessary to integrate social sharing buttons on your website. There are plenty of options to choose from, So in this post will explore the top 50+ HTML CSS Social Share Buttons script for displaying your social media sharing buttons with maximum efficacy.

HTML CSS Social Share Buttons

Following are the list of popular HTML CSS Social Share Buttons.

Social Share Button

Social Share Button

Social Share Button script made with HTML (Pug) / CSS (Sass) and written By kiyutink.



Facebook/Instagram Share Button

Facebook/Instagram Share Button

Facebook/Instagram Share Button script made with HTML / CSS (SCSS) and written By nicoculotta.



Social Share Button UI

Social Share Button UI

Social Share Button UI script made with HTML (Pug) / CSS (Sass) / JavaScript and written By altreiter.



Simple Share Button

Simple Share Button

Simple Share Button script made with HTML / CSS and written By larrygeams.


Share Button

Share Button

Share Button script made with HTML / CSS (SCSS) and written By bertdida.


Social Media Icons Share

Social Media Icons Share

Social Media Icons Share script made with HTML / CSS (SCSS) and written By chandrashekhar.


Share Button

Share Button

Share Button script made with HTML / CSS and written By veronicadev.


CSS Share Icons

CSS Share Icons

CSS Share Icons script made with HTML (Pug) / CSS (Sass) and written By FUGU22.


Share Buttons Animation

Share Buttons Animation

Share Buttons Animation script made with HTML / CSS (SCSS) and written By premitheme.


Social Share Button

Social Share Button

Social Share Button script made with HTML / CSS and written By yancy.



Social Share Button

Social Share Button

Social Share Button script made with HTML / CSS (SCSS) and written By RobVermeer.


Slide-Out Social Buttons

Slide-Out Social Buttons

Slide-Out Social Buttons script made with HTML / CSS (SCSS) and written By stevenschobert.

Social share button DEMO

 Social share button

Social share button that pull apart into seperate buttons – By RobVermeer


Daily UI #010: Social Share DEMO

 Daily UI #010: Social Share

https://dribbble.com/shots/2547161-Daily-UI-010-Social-Share – By supah


Social share button DEMO

 Social share button

Pure CSS social-share button. – By kiyutink


Daily UI #010 :: Social Share DEMO

 Daily UI #010 :: Social Share

Utilizing Codrops omidirectional hover http://tympanus.net/codrops/2012/04/09/direction-aware-hover-effect-with-css3-and-jquery/ – By magnificode



Social Share DEMO

 Social Share

A social share widget built with HTML. CSS and jQuery – By j-w-v


Social Sharing Concept DEMO

 Social Sharing Concept

Social Sharing Concept (v1) with CSS Animations and Font Awesome – By pirrera


bootstrap | social share bar DEMO

 bootstrap | social share bar

social share bar based on the CKEditor Blog Social Bar. Icons from Fontawesome. Tooltip from Bootstrap. – By mindstorm


Social Sharing Menu with Hover DEMO

 Social Sharing Menu with Hover

Social Sharing Menu with Hover just CSS3 – By JFarrow


Social Share Squircles (Auto-Colored) DEMO

 Social Share Squircles (Auto-Colored)

Share icons that are automatically coloured by matching on the href attribute. Also, squircles. – By rikschennink


Social Sharing Buttons DEMO

 Social Sharing Buttons

An implementation of social sharing buttons without too much hassle . – By ritz078


Social Sharing Button DEMO

 Social Sharing Button

Simple animation for a social sharing button that expands to show links. – By keithchis



Easy Social Share Buttons ( CSS, HTML, Font Awesome ) DEMO

 Easy Social Share Buttons ( CSS, HTML, Font Awesome )

Really easy to implement social share buttons with minimal markup. Lightweight and fast loading. These buttons use Font Awesome, so they could very easily scale in a responsive way with some changes to the CSS. You could also very easily change the colors, make them squares or remove the backgrounds entirely. – By asheabbott


Custom Bootstrap Social Share Buttons DEMO

 Custom Bootstrap Social Share Buttons

social media icons for websites using the bootstrap css framework. Apply social share functionality to any design or custom icons. – By JacobLett


Vue Social Share Component DEMO

 Vue Social Share Component

– By gerrells-david


React DailyUI – 010 – Social Share DEMO

 React DailyUI - 010 - Social Share

Day 10 of 100! 10% of the way through baby! Awesome. Today is a social share button. click the button and see what happens. 😀 – By jackoliver


Social Share for Mobile Users DEMO

 Social Share for Mobile Users

With this script, you can show social share buttons on your mobile website without any developments. It’s automatically collect your data from HTML and even support WhatsApp. – By adobewordpress



Social share button DEMO

 Social share button

Social share button – By didac


Social Share Button DEMO

 Social Share Button

Just another share button. – By kylelavery88


Flat Animated Social Share DEMO

 Flat Animated Social Share

Expanding social share using 3d transform and css transitions – By nate437


Social Icons DEMO

 Social Icons

Round social sharing buttons – By thalseth


Subscribe & Social Share Buttons DEMO

 Subscribe & Social Share Buttons

Subscribe and Social Sharing button created with Twitter Bootstrap. – By justincron


Social share button DEMO

 Social share button

Social share button inspire with https://dribbble.com/shots/1034808-Widget?list=users&offset=2 – By arjunamgain


How to create Social Sharing Buttons with Bootstrap DEMO

 How to create Social Sharing Buttons with Bootstrap

How to create Social Sharing Buttons with Bootstrap – By creativedev



#DailyUI010 Social Share DEMO

 #DailyUI010 Social Share

Social share icons as part of the #DailyUI challenge #010. – By baublet


CSS3 Animated Social Sharing Buttons DEMO

 CSS3 Animated Social Sharing Buttons

Playing around with different animation styles for social sharing buttons. – By laurenashpole


Social Share Bar DEMO

 Social Share Bar

Social icons that grow on hover, useful for a social share menu, the plus at the bottom can be set to add more social networks. This can also be changed to be used as a vertical menu with zoom icons using font-awesome – By brianwik


Social share with GSAP DEMO

 Social share with GSAP

Custom social share components with preview. Based on dribbble shot and principle repo: https://dribbble.com/shots/2337668-Day-10-Social-Share – By zzavrski


Social sharing button animation DEMO

 Social sharing button animation

svg stroke animation on hover – By wouwi



DailyUi – Music Player + Social Share DEMO

 DailyUi - Music Player + Social Share

DailyUi Challange #009 & #010 Music Player with Social Share – By paulborm


Social Sharing Buttons DEMO

 Social Sharing Buttons

Just some share buttons i made for my upcoming blog. Open this preview in any webkit browser 🙂 (It should be working Firefox too.) – By codewunder


social-share-ru DEMO

 social-share-ru

https://github.com/eveness/social-share-ru – By eveness


Craft CMS Custom Social Share and CSS Button Transition DEMO

 Craft CMS Custom Social Share and CSS Button Transition

Fancy button transition (translating :after element on hover) – html includes fields in my Craft setup that the user can drop custom text into to customize share of individual blog posts. – By megkadams


Simple jQuery Social Share Dropdown DEMO

 Simple jQuery Social Share Dropdown

Simple Social Share jQUery Dropdown menu from MySkins Studio : www.myskins.org – By envira


Animated Twitter Button DEMO

 Animated Twitter Button

Re-created the hornig social-share effect. Enjoy! – By ScottMarshall


Social Share Button DEMO

 Social Share Button

– By AaronRaff



Social share button DEMO

 Social share button

– By yancy


Social Sharing Widget DEMO

 Social Sharing Widget

A fork of a social sharing solution using pure CSS and web fonts. Inspired by @Jobargod’s http://cssdeck.com/labs/css-social-share-button – By ianrobertdouglas


DailyUI #010 – Social Share DEMO

 DailyUI #010 - Social Share

Social share example to the Daily UI Challenge #010. – By mycnlz


V-Card WIP DEMO

 V-Card WIP

I spend a lot of time on Forrst, LinkedIn and Twitter and wanted to try to create a v-card that incorporated elements from each as a practice project. I’ll continue working on this through the weekend and add the social dropdown, a skills section, an add user option and maybe a list of followers/friends feature. – By TimRuby


Social Share DEMO

 Social Share

– By KovJonas



#dailyui 010: Social Share DEMO

 #dailyui 010: Social Share

A couple of different versions of a share widget, fully animated and CSS-only – By gabriellewee


Social Sharing Buttons DEMO

 Social Sharing Buttons

My own very light social sharing buttons. Vanilla JS. – By trvswgnr


Floating Social Sidebar DEMO

 Floating Social Sidebar

– By mattlitzinger


DailyUI #010 | Social Share Buttons DEMO

 DailyUI #010 | Social Share Buttons

Share button design for Alaska Airlines // need better animation.. (not finished yet!) – By juliepark


I Hope you liked Hand-picked list of HTML CSS Social Share Buttons, Don’t forget to Subscribe My Public Notebook for more useful Hand-picked HTML and CSS code examples, tutorials and articles.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.