45+ CSS Social Share Buttons

Are you looking for unique and playful social share buttons that encourage users to share content on social media sites? Wait, don’t look elsewhere. In this collection, we are featuring 45+ HTML and CSS social share button code examples helping users to share articles, images, or other content on platforms like Facebook, Twitter, LinkedIn, Pinterest, etc.

We’ve sourced these social share buttons from top sites like GitHub, CodePen, and various other platforms, helping web designers, developers, and site owners to enhance user interaction and website functionality.

We have a diverse range of free social share buttons offering never-ending customisation options to improve the website’s interactivity and content engagement. Explore options that cater to different styles and needs, from minimalist designs to vibrant, eye-catching buttons! These modern social share buttons will enhance usability and visual appeal of your web project.

Whether you’re looking to add these items to a portfolio site, a blog website, or an eCommerce site, these social share buttons increase visibility of content, enhance user engagement, and improve SEO that indirectly boosts traffic. Check out an eye-catching collection of hand-picked CSS social share buttons, ensuring a seamless integration into your site and making your web project shine.

1. SVG Social Media Icons

See the Pen <a href="https://codepen.io/ruandre/pen/MWXxem"> SVG Social Media Icons</a> by Ruandré Janse van Rensburg (<a href="https://codepen.io/ruandre">@ruandre</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ruandré Janse van Rensburg
Source: Code / Demo
Created on: AUGUST 25, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Sass), JavaScript(Babel)

2. CSS3 Social buttons vol.2

See the Pen <a href="https://codepen.io/foxeisen/pen/oZPzMQ"> CSS3 Social buttons vol.2</a> by foxeisen (<a href="https://codepen.io/foxeisen">@foxeisen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: foxeisen
Source: Code / Demo
Created on: MARCH 27, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

3. Social media hover icons with pop-up titles

See the Pen <a href="https://codepen.io/kieranfivestars/pen/gbOWbM"> Social media hover icons with pop-up titles</a> by Kieran Hunter (<a href="https://codepen.io/kieranfivestars">@kieranfivestars</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kieran Hunter
Source: Code / Demo
Created on: NOVEMBER 14, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

4. Social Media Footer

See the Pen <a href="https://codepen.io/deutschland2k/pen/qKpdJX"> Social Media Footer</a> by Rúben Silva (<a href="https://codepen.io/deutschland2k">@deutschland2k</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rúben Silva
Source: Code / Demo
Created on: JUNE 18, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

5. Social Share Button

See the Pen <a href="https://codepen.io/altreiter/pen/KGwqoK"> Social Share Button #DailyUI #010</a> by David Altreiter (<a href="https://codepen.io/altreiter">@altreiter</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: David Altreiter
Source: Code / Demo
Created on: SEPTEMBER 29, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Sass), JavaScript

6. Share Button

See the Pen <a href="https://codepen.io/onediv/pen/ZEjNqb"> Share Button</a> by Vincent Durand (<a href="https://codepen.io/onediv">@onediv</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Vincent Durand
Source: Code / Demo
Created on: SEPTEMBER 2, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

7. Social Share Buttons

See the Pen <a href="https://codepen.io/juliepark/pen/yjOQmV"> DailyUI #010 | Social Share Buttons</a> by Julie Park (<a href="https://codepen.io/juliepark">@juliepark</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Julie Park
Source: Code / Demo
Created on: APRIL 25, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

8. Social Buttons

See the Pen <a href="https://codepen.io/minimalmonkey/pen/nxdwwR"> Sexy Social Buttons</a> by Stephen Burgess (<a href="https://codepen.io/minimalmonkey">@minimalmonkey</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Stephen Burgess
Source: Code / Demo
Created on: JUNE 13, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

9. Simple Share Button

See the Pen <a href="https://codepen.io/larrygeams/pen/DQzLEW"> Simple Share Button</a> by Larry Geams Parangan (<a href="https://codepen.io/larrygeams">@larrygeams</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Larry Geams Parangan
Source: Code / Demo
Created on: DECEMBER 3, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

10. SASS-y Social Media Font Icons Hover Effects

See the Pen <a href="https://codepen.io/asna_farid/pen/ORJZej"> SASS-y Social Media Font Icons Hover Effects</a> by Asna Farid (<a href="https://codepen.io/asna_farid">@asna_farid</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Asna Farid
Source: Code / Demo
Created on: SEPTEMBER 2, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

11. Social Share Button

See the Pen <a href="https://codepen.io/AaronRaff/pen/zqdZpa"> Social Share Button</a> by Aaron Raff (<a href="https://codepen.io/AaronRaff">@AaronRaff</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Aaron Raff
Source: Code / Demo
Created on: MARCH 30, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

12. Social Share Buttons + Counters + Fixed Example

See the Pen <a href="https://codepen.io/markayim/pen/PEpmgM"> Social Share Buttons + Counters + Fixed Example</a> by Shouter (<a href="https://codepen.io/markayim">@markayim</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Shouter
Source: Code / Demo
Created on: DECEMBER 28, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

13. Social share button

See the Pen <a href="https://codepen.io/RobVermeer/pen/aNYQMx"> Social share button</a> by Rob Vermeer (<a href="https://codepen.io/RobVermeer">@RobVermeer</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Rob Vermeer
Source: Code / Demo
Created on: APRIL 15, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript(Babel)

14. Animated Share Button

See the Pen <a href="https://codepen.io/mlegrix/pen/myydpX"> Animated Share Button</a> by matthieu (<a href="https://codepen.io/mlegrix">@mlegrix</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: matthieu
Source: Code / Demo
Created on: NOVEMBER 18, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

15. Custom Bootstrap Social Share Buttons

See the Pen <a href="https://codepen.io/JacobLett/pen/NxYOoO"> Custom Bootstrap Social Share Buttons</a> by Jacob Lett (<a href="https://codepen.io/JacobLett">@JacobLett</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jacob Lett
Source: Code / Demo
Created on: JANUARY 27, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

16. Gooey share button

See the Pen <a href="https://codepen.io/kiyutink/pen/vKqpOg"> Gooey share button №1792347</a> by Kirill Kiyutin (<a href="https://codepen.io/kiyutink">@kiyutink</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kirill Kiyutin
Source: Code / Demo
Created on: AUGUST 25, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

17. Slide-out social buttons

See the Pen <a href="https://codepen.io/stevenschobert/pen/NPPymX"> Slide-out social buttons</a> by Steven Schobert (<a href="https://codepen.io/stevenschobert">@stevenschobert</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Steven Schobert
Source: Code / Demo
Created on: NOVEMBER 20, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

18. Share Icons With Hover Effects (All CSS)

See the Pen <a href="https://codepen.io/FUGU22/pen/VzLvQV"> Share Icons With Hover Effects (All CSS)</a> by Charlie Marcotte (<a href="https://codepen.io/FUGU22">@FUGU22</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Charlie Marcotte
Source: Code / Demo
Created on: JULY 26, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS (Sass)

19. Share & Social Semicircles

See the Pen <a href="https://codepen.io/mattjuggins/pen/MjeozP"> Share & Social Semicircles</a> by Matthew Juggins (<a href="https://codepen.io/mattjuggins">@mattjuggins</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Matthew Juggins
Source: Code / Demo
Created on: SEPTEMBER 16, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Haml), CSS(SCSS), JavaScript

20.Social Buttons

See the Pen <a href="https://codepen.io/dsyncerek/pen/zzqpEx"> Social Buttons</a> by Dariusz Syncerek (<a href="https://codepen.io/dsyncerek">@dsyncerek</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Dariusz Syncerek
Source: Code / Demo
Created on: JUNE 12, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

21. SVG Filter Gooey Share, Social Media Button

See the Pen <a href="https://codepen.io/sashatran/pen/WpbGEE"> SVG Filter Gooey Share, Social Media Button</a> by Sasha (<a href="https://codepen.io/sashatran">@sashatran</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sasha
Source: Code / Demo
Created on: FEBRUARY 25, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS), JavaScript

22. Infinito Web Design Studio – Portfolio Zipline

See the Pen <a href="https://codepen.io/ThiagoFerreir4/pen/eNMxEp"> Infinito Web Design Studio – Portfolio Zipline</a> by Thiago Ferreira (<a href="https://codepen.io/ThiagoFerreir4">@ThiagoFerreir4</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Thiago Ferreira
Source: Code / Demo
Created on: JULY 8, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

23. Share button

See the Pen <a href="https://codepen.io/veronicadev/pen/yEzmjw"> Share button</a> by Veronica (<a href="https://codepen.io/veronicadev">@veronicadev</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Veronica
Source: Code / Demo
Created on: JUNE 16, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

24. Social Media Icons hover effect

See the Pen <a href="https://codepen.io/ephs23/pen/NeQZGx"> Social Media Icons hover effect </a> by Ephraim Sangma (<a href="https://codepen.io/ephs23">@ephs23</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ephraim Sangma
Source: Code / Demo
Created on: JANUARY 20, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

25. Social Media Icons Share

See the Pen <a href="https://codepen.io/chandrashekhar/pen/ypvdRR"> Social Media Icons Share</a> by Chandra Shekhar (<a href="https://codepen.io/chandrashekhar">@chandrashekhar</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Chandra Shekhar
Source: Code / Demo
Created on: JANUARY 10, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS (SCSS)

26. Hover social buttons changes background-color

See the Pen <a href="https://codepen.io/TimGr/pen/gOoowZ"> Hover social buttons changes background-color</a> by Tim (<a href="https://codepen.io/TimGr">@TimGr</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tim
Source: Code / Demo
Created on: JULY 19, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript

27. Neumorphism Social Share Button

See the Pen <a href="https://codepen.io/yuhomyan/pen/abdRKrM"> Neumorphism Social Share Button</a> by Yuhomyan (<a href="https://codepen.io/yuhomyan">@yuhomyan</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Yuhomyan
Source: Code / Demo
Created on: JULY 17, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

28. Social Media Slide Out Menu

See the Pen <a href="https://codepen.io/tonyooi/pen/PPbNrj"> Social Media Slide Out Menu</a> by Tony Ooi (<a href="https://codepen.io/tonyooi">@tonyooi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Tony Ooi
Source: Code / Demo
Created on: SEPTEMBER 26, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Sass), JavaScript

29. Share button

See the Pen <a href="https://codepen.io/bertdida/pen/jemgbO"> Share button</a> by bertdida (<a href="https://codepen.io/bertdida">@bertdida</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: bertdida
Source: Code / Demo
Created on: OCTOBER 11, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

30. Media Icon

See the Pen <a href="https://codepen.io/mattbhenley/pen/aRKmgR"> Media Icons </a> by matt henley (<a href="https://codepen.io/mattbhenley">@mattbhenley</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: matt henley
Source: Code / Demo
Created on: OCTOBER 20, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

31. Pure CSS Social Media Icons

See the Pen <a href="https://codepen.io/laurenclark/pen/YzKRxW"> Pure CSS Social Media Icons </a> by Lauren Clark (<a href="https://codepen.io/laurenclark">@laurenclark</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Lauren Clark
Source: Code / Demo
Created on: FEBRUARY 26, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

32. Social Media Button Hover Effect

See the Pen <a href="https://codepen.io/easywebcode/pen/qBBvNEO"> Social Media Button Hover Effect</a> by Easy WebCode (<a href="https://codepen.io/easywebcode">@easywebcode</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Easy WebCode
Source: Code / Demo
Created on: NOVEMBER 20, 2019
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

33. CSS3 Social buttons vol.1

See the Pen <a href="https://codepen.io/foxeisen/pen/aJZPxW"> CSS3 Social buttons vol.1</a> by foxeisen (<a href="https://codepen.io/foxeisen">@foxeisen</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: foxeisen
Source: Code / Demo
Created on: MARCH 5, 2017
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

34. Social share button

See the Pen <a href="https://codepen.io/kiyutink/pen/grXvNg"> Social share button</a> by Kirill Kiyutin (<a href="https://codepen.io/kiyutink">@kiyutink</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Kirill Kiyutin
Source: Code / Demo
Created on: APRIL 5, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML(Pug), CSS(Sass), JavaScript

35. Multi Share Button in Pure CSS

See the Pen <a href="https://codepen.io/brycesnyder/pen/dXozeV"> Multi Share Button in Pure CSS</a> by Bryce Snyder (<a href="https://codepen.io/brycesnyder">@brycesnyder</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Bryce Snyder
Source: Code / Demo
Created on: JUNE 4, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

36. Social Media Icons – Floating

See the Pen <a href="https://codepen.io/Stockin/pen/jeNQEN"> Social Media Icons – Floating</a> by Stockin (<a href="https://codepen.io/Stockin">@Stockin</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Stockin
Source: Code / Demo
Created on: SEPTEMBER 27, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

37. Social Share Buttons

See the Pen <a href="https://codepen.io/jasondavis/pen/NWyWvz"> Social Share Buttons</a> by Jason Davis (<a href="https://codepen.io/jasondavis">@jasondavis</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jason Davis
Source: Code / Demo
Created on: JULY 24, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

38. Expanding Share Button

See the Pen <a href="https://codepen.io/tamashi/pen/ojyoWr"> Expanding Share Button</a> by Sandro Walet (<a href="https://codepen.io/tamashi">@tamashi</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Sandro Walet
Source: Code / Demo
Created on: OCTOBER 30, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less), JavaScript

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

See the Pen <a href="https://codepen.io/asheabbott/pen/GoMrzW"> Easy Social Share Buttons ( CSS, HTML, Font Awesome )</a> by Ashe Abbott DiBlasi (<a href="https://codepen.io/asheabbott">@asheabbott</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ashe Abbott DiBlasi
Source: Code / Demo
Created on: JANUARY 15, 2016
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

40. Another Login Panel

See the Pen <a href="https://codepen.io/clein/pen/neGWRe"> another login panel</a> by Jens Motyka (<a href="https://codepen.io/clein">@clein</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Jens Motyka
Source: Code / Demo
Created on: JULY 30, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(Less)

41. Facebook/instagram share button

See the Pen <a href="https://codepen.io/nicoculotta/pen/bxrgrE"> facebook/instagram share button</a> by Nicolas Culotta (<a href="https://codepen.io/nicoculotta">@nicoculotta</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nicolas Culotta
Source: Code / Demo
Created on: SEPTEMBER 5, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS(SCSS)

42. CSS social buttons and icons

See the Pen <a href="https://codepen.io/Stanssongs/pen/VwvrBR"> CSS social buttons and icons</a> by Stan Williams (<a href="https://codepen.io/Stanssongs">@Stanssongs</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Stan Williams
Links: Code / Demo
Created on: MARCH 29, 2014
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

43. Social share button

See the Pen <a href="https://codepen.io/yancy/pen/qyMdod"> Social share button</a> by Yancy Min (<a href="https://codepen.io/yancy">@yancy</a>) on <a href="https://codepen.io">CodePen</a>. Author: Yancy Min
Source: Code / Demo
Created on: AUGUST 6, 2018
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

44. 3D Social Media Button

See the Pen <a href="https://codepen.io/nouribram/pen/WNQzoOd"> Code Challenge 2020 || 3D Social Media Button </a> by Nour Ibram (<a href="https://codepen.io/nouribram">@nouribram</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Nour Ibram
Source: Code / Demo
Created on: MAY 8, 2020
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

45. Social Share

See the Pen <a href="https://codepen.io/labnol/pen/DjyXOm"> Social Share</a> by Amit Agarwal (<a href="https://codepen.io/labnol">@labnol</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Amit Agarwal
Source: Code / Demo
Created on: MAY 21, 2013
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS

46. Social Sharing Buttons

See the Pen <a href="https://codepen.io/ritz078/pen/dPLeGm"> Social Sharing Buttons</a> by Ritesh Kumar (<a href="https://codepen.io/ritz078">@ritz078</a>) on <a href="https://codepen.io">CodePen</a>. 
Author: Ritesh Kumar
Source: Code / Demo
Created on: APRIL 2, 2015
Compatible browsers: Chrome, Firefox, Opera, Edge, Brave
Made with: HTML, CSS, JavaScript