40+ CSS Social Share Buttons

Last Updated on by in CSS Examples
CSS Social Share Buttons

In today’s digital landscape, sharing content on various social media platforms is essential for increasing website visibility and user engagement. Social share buttons are the UI elements that enable visitors to promote and share website content with a single click.

In this post, we present comprehensive collection of free HTML, and CSS social share buttons sourced from reputable repositories like GitHub and CodePen. These repositories house meticulously crafted social share icons, catering to diverse website themes and objectives.

Our collection offers a wide range of CSS social network button, ranging from simple designs to stylish social share buttons, ensuring access to the most versatile and innovative social share button collection. These social share buttons easily integrate into any site’s design, offering a visually appealing and functional approach to social sharing.

Let’s check out our mesmerizing compilation of CSS social share buttons, boosting content reach and encouraging social signals that positively impact search engine rankings and uplift the user experience.

01. Social Media Icons – Floating

See the Pen
Social Media Icons – Floating
by Stockin (@Stockin)
on CodePen.


Author: Stockin @Stockin
Links: Source Code / Demo
Created on: September 27, 2018
Made with: HTML, CSS

02. SVG Social Media Icons

See the Pen
SVG Social Media Icons
by Ruandré Janse van Rensburg (@ruandre)
on CodePen.


Author: Ruandré Janse van Rensburg @ruandre
Links: Source Code / Demo
Created on: August 25, 2014
Made with: HTML, CSS(Sass), JS(Babel)

03. Another Login Panel

See the Pen
another login panel
by Jens Motyka (@clein)
on CodePen.


Author: Jens Motyka @clein
Links: Source Code / Demo
Created on: July 30, 2013
Made with: HTML, CSS(Less)

04.  Social Media Footer

See the Pen
Social Media Footer
by Rúben Silva (@deutschland2k)
on CodePen.


Author: Rúben Silva @deutschland2k
Links: Source Code / Demo
Created on: June 18, 2018
Made with: HTML, CSS

05. Social Buttons

See the Pen
Sexy Social Buttons
by Stephen Burgess (@minimalmonkey)
on CodePen.


Author: Stephen Burgess @minimalmonkey
Links: Source Code / Demo
Created on: June 13, 2013
Made with: HTML, CSS

06. Social Share Buttons + Counters + Fixed Example

See the Pen
Social Share Buttons + Counters + Fixed Example
by Shouter (@markayim)
on CodePen.


Author: Shouter @markayim
Links: Source Code / Demo
Created on: December 28, 2017
Made with: HTML, CSS, JS

07. Slide-out social buttons

See the Pen
Slide-out social buttons
by Steven Schobert (@stevenschobert)
on CodePen.


Author: Steven Schobert @stevenschobert
Links: Source Code / Demo
Created on: November 20, 2014
Made with: HTML, CSS(SCSS)

08. Infinito Web Design Studio – Portfolio Zipline

See the Pen
Infinito Web Design Studio – Portfolio Zipline
by Thiago Ferreira (@ThiagoFerreir4)
on CodePen.


Author: Thiago Ferreira @ThiagoFerreir4
Links: Source Code / Demo
Created on: July 8, 2015
Made with: HTML, CSS

09. Social Media Slide Out Menu

See the Pen
Social Media Slide Out Menu
by Tony Ooi (@tonyooi)
on CodePen.


Author: Tony Ooi @tonyooi
Links: Source Code / Demo
Created on: September 26, 2015
Made with: HTML, CSS(Sass), JS

10. CSS3 Social buttons vol.1

See the Pen
CSS3 Social buttons vol.1
by foxeisen (@foxeisen)
on CodePen.


Author: foxeisen @foxeisen
Links: Source Code / Demo
Created on: March 5, 2017
Made with: HTML,  CSS(SCSS)

11. CSS social buttons and icons

See the Pen
CSS social buttons and icons
by Stan Williams (@Stanssongs)
on CodePen.


Author: Stan Williams @Stanssongs
Links: Source Code / Demo
Created on: March 29, 2014
Made with: HTML, CSS

12. Social Sharing Buttons

See the Pen
Social Sharing Buttons
by Ritesh Kumar (@ritz078)
on CodePen.


Author: Ritesh Kumar @ritz078
Links: Source Code / Demo
Created on: April 2, 2015
Made with: HTML, CSS, JS

13. CSS3 Social buttons vol.2

See the Pen
CSS3 Social buttons vol.2
by foxeisen (@foxeisen)
on CodePen.


Author: foxeisen @foxeisen
Links: Source Code / Demo
Created on: March 27, 2017
Made with: HTML,  CSS(SCSS)

14. SASS-y Social Media Font Icons Hover Effects

See the Pen
SASS-y Social Media Font Icons Hover Effects
by Asna Farid (@asna_farid)
on CodePen.


Author: Asna Farid @asna_farid
Links: Source Code / Demo
Created on: September 2, 2016
Made with: HTML, CSS(SCSS)

15. Custom Bootstrap Social Share Buttons

See the Pen
Custom Bootstrap Social Share Buttons
by Jacob Lett (@JacobLett)
on CodePen.


Author: Jacob Lett @JacobLett
Links: Source Code / Demo
Created on: January 27, 2016
Made with: HTML, CSS, JS

16. Social Buttons

See the Pen
Social Buttons
by Dariusz Syncerek (@dsyncerek)
on CodePen.


Author: Dariusz Syncerek @dsyncerek
Links: Source Code / Demo
Created on: June 12, 2017
Made with: HTML, CSS(SCSS)

17. Hover social buttons changes background-color

See the Pen
Hover social buttons changes background-color
by Tim (@TimGr)
on CodePen.


Author: Tim @TimGr
Links: Source Code / Demo
Created on: July 19, 2014
Made with: HTML, CSS, JS

18.  Pure CSS Social Media Icons

See the Pen
Pure CSS Social Media Icons
by Lauren Clark (@laurenclark)
on CodePen.


Author: Lauren Clark @laurenclark
Links: Source Code / Demo
Created on: February 26, 2014
Made with: HTML, CSS

19. 3D Social Media Button

See the Pen
Code Challenge 2020 || 3D Social Media Button
by Nour Ibram (@nouribram)
on CodePen.


Author: Nour Ibram @nouribram
Links: Source Code / Demo
Created on: May 8, 2020
Made with: HTML, CSS

20. Media Icons

See the Pen
Media Icons
by matt henley (@mattbhenley)
on CodePen.


Author: matt henley @mattbhenley
Links: Source Code / Demo
Created on: October 20, 2018
Made with: HTML, CSS(SCSS)

21. Social media hover icons with pop-up titles

See the Pen
Social media hover icons with pop-up titles
by Kieran Hunter (@kieranfivestars)
on CodePen.


Author: Kieran Hunter @kieranfivestars
Links: Source Code / Demo
Created on: November 14, 2014
Made with: HTML, CSS

22. Animated Share Button

See the Pen
Animated Share Button
by matthieu (@mlegrix)
on CodePen.


Author: matthieu @mlegrix
Links: Source Code / Demo
Created on: November 18, 2014
Made with: HTML, CSS, JS

23. Social Media Icons hover effect

See the Pen
Social Media Icons hover effect
by Ephraim Sangma (@ephs23)
on CodePen.


Author: Ephraim Sangma @ephs23
Links: Source Code / Demo
Created on: January 20, 2019
Made with: HTML, CSS

24. Social Media Button Hover Effect

See the Pen
Social Media Button Hover Effect
by Easy WebCode (@easywebcode)
on CodePen.


Author: Easy WebCode @easywebcode
Links: Source Code / Demo
Created on: November 20, 2019
Made with: HTML, CSS

25. Expanding Share Button

See the Pen
Expanding Share Button
by Sandro Walet (@tamashi)
on CodePen.


Author: Sandro Walet @tamashi
Links: Source Code / Demo
Created on: October 30, 2015
Made with: HTML, CSS(Less), JS

26. Share Button

See the Pen
Share Button
by Vincent Durand (@onediv)
on CodePen.


Author: Vincent Durand @onediv
Links: Source Code / Demo
Created on: September 2, 2014
Made with: HTML, CSS, JS

27. Social Share Button

See the Pen
Social Share Button
by Aaron Raff (@AaronRaff)
on CodePen.


Author: Aaron Raff @AaronRaff
Links: Source Code / Demo
Created on: March 30, 2016
Made with: HTML, CSS, JS

28. Gooey share button

See the Pen
Gooey share button №1792347
by Kirill Kiyutin (@kiyutink)
on CodePen.


Author: Kirill Kiyutin @kiyutink
Links: Source Code / Demo
Created on: August 25, 2016
Made with: HTML, CSS(SCSS), JS

29. Share button

See the Pen
Share button
by Veronica (@veronicadev)
on CodePen.


Author: Veronica @veronicadev
Links: Source Code / Demo
Created on: June 16, 2018
Made with: HTML, CSS

30. Share button

See the Pen
Share button
by bertdida (@bertdida)
on CodePen.


Author: bertdida @bertdida
Links: Source Code / Demo
Created on: October 11, 2018
Made with: HTML, CSS(SCSS)

31. Multi Share Button in Pure CSS

See the Pen
Multi Share Button in Pure CSS
by Bryce Snyder (@brycesnyder)
on CodePen.


Author: Bryce Snyder @brycesnyder
Links: Source Code / Demo
Created on: June 4, 2016
Made with: HTML, CSS(Less)

32. facebook/instagram share button

See the Pen
facebook/instagram share button
by Nicolas Culotta (@nicoculotta)
on CodePen.


Author: Nicolas Culotta @nicoculotta
Links: Source Code / Demo
Created on: September 5, 2018
Made with: HTML, CSS (SCSS)

33. Simple Share Button

See the Pen
Simple Share Button
by Larry Geams Parangan (@larrygeams)
on CodePen.


Author: Larry Geams Parangan @larrygeams
Links: Source Code / Demo
Created on: December 3, 2013
Made with: HTML, CSS

34. Social share button

See the Pen
Social share button
by Rob Vermeer (@RobVermeer)
on CodePen.


Author: Rob Vermeer @RobVermeer
Links: Source Code / Demo
Created on: April 15, 2016
Made with: HTML, CSS(SCSS), JS(Babel)

35. Social Share Button

See the Pen
Social Share Button #DailyUI #010
by David Altreiter (@altreiter)
on CodePen.


Author: David Altreiter @altreiter
Links: Source Code / Demo
Created on: September 29, 2018
Made with: HTML(Pug), CSS (Sass), JS

36. SVG Filter Gooey Share, Social Media Button

See the Pen
SVG Filter Gooey Share, Social Media Button
by Sasha (@sashatran)
on CodePen.


Author: Sasha @sashatran
Links: Source Code / Demo
Created on: February 25, 2017
Made with: HTML, CSS (SCSS), JS

37. Social Media Icons Share

See the Pen
Social Media Icons Share
by Chandra Shekhar (@chandrashekhar)
on CodePen.


Author: Chandra Shekhar @chandrashekhar
Links: Source Code / Demo
Created on: January 10, 2018
Made with: HTML, CSS (SCSS)

38. Social share button

See the Pen
Social share button
by Kirill Kiyutin (@kiyutink)
on CodePen.


Author: Kirill Kiyutin @kiyutink
Links: Source Code / Demo
Created on: April 5, 2016
Made with: HTML(Pug), CSS(Sass), JS

39. Social share button

See the Pen
Social share button
by Yancy Min (@yancy)
on CodePen.


Author: Yancy Min @yancy
Links: Source Code / Demo
Created on: August 6, 2018
Made with: HTML, CSS

40. Share Icons With Hover Effects (All CSS)

See the Pen
Share Icons With Hover Effects (All CSS)
by Charlie Marcotte (@FUGU22)
on CodePen.


Author: Charlie Marcotte @FUGU22
Links: Source Code / Demo
Created on: July 26, 2017
Made with: HTML (Pug), CSS (Sass)

41. Social Share Buttons

See the Pen
DailyUI #010 | Social Share Buttons
by Julie Park (@juliepark)
on CodePen.


Author: Julie Park @juliepark
Links: Source Code / Demo
Created on: April 25, 2018
Made with: HTML, CSS(SCSS), JS