Social Media Icons Using HTML CSS

Hello there! In this article, you will find 15+ CSS Social Buttons & Icons made with pure HTML and CSS with complete source code so you can copy and paste it into your project.

Everyone uses social platforms these days, and adding links to social handles is a must on a website. so why use plain boring social media icons? Don’t worry we’ve got you covered. We have Handpicked the best 15+ CSS Social Buttons & Icons from the web for you to use in your project.

Let’s see some cool 15+ CSS Social Buttons & Icons.

1. Floating Social Buttons (Font Awesome)

Code by	Noah
Demo & download	Click here for code
Language used	HTML,CSS
External link / Dependencies	No
Responsive	No

Let’s start our list with floating social icons by Noah made using HTML and CSS. on hover the icons rise above.

2. Social Media Icons

Code by	Marty
Demo & download	click here for code
Language used	HTML,CSS
External link / Dependencies	Yes
Responsive	No

Marty’s social media icons were developed using HTML and CSS. on hover the color of the icon changes.

3. Yet Another Set of Animated Social Icons

Code by	James Fleeting
Demo & download	click here for code
Language used	HTML,CSS(SCSS)
External link / Dependencies	Yes
Responsive	Yes

A collection of animated social media icons by James Fleeting made with HTML and CSS(SCSS). simple spinning and border-radius animation on :hover for social icons.

100+ JavaScript Projects With Source Code ( Beginners to Advanced)

4. Fancy Up Those Social Media Icons!!!

Code by	Tichaona Brendon Nyeke
Demo & download	click here for code
Language used	HTML,CSS(SCSS)
External link / Dependencies	Yes
Responsive	No

A massive collection of social media icons by Tichaona Brendon Nyeke made by using HTML and CSS(SCSS).

5. Social Buttons

Code by	Dariusz Syncerek
Demo & download	click here for code
Language used	HTML,CSS(SCSS)
External link / Dependencies	Yes
Responsive	Yes

Simple and clean-looking social buttons by Dariusz Syncerek. These icons are made with HTML and CSS(SCSS)

6. SVG Social Media Icons

Code by	Ruandré Janse van Rensburg
Demo & download	click here for code
Language used	HTML,CSS(Sass),JS(Babel)
External link / Dependencies	Yes
Responsive	No

SVG Social Media Icons by Ruandré Janse van Rensburg were made using HTML, CSS(Sass), and JS(Babel).

7. SVG Social Icons

Code by	Kevin Dewar
Demo & download	click here for code
Language used	HTML,CSS(SCSS)
External link / Dependencies	No
Responsive	No

Social icons by Kevin Dewar were made by using HTML and CSS(SCSS). on hover, the icon’s border glows.

Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript

8. 3D – CSS Social Tiles

Code by	Stockin
Demo & download	click here for code
Language used	HTML,CSS
External link / Dependencies	Yes
Responsive	No

3D social media icons in the form of tiles. These icons are made by Stockin using HTML and CSS.

9. Media Icons

Code by	matt henley
Demo & download	click here for code
Language used	HTML,CSS(SCSS)
External link / Dependencies	No
Responsive	No

Social media icons with hover and inverse actions made by matt henley using HTML and CSS(SCSS).

10. CSS social buttons and icons

Code by	Stan Williams
Demo & download	click here for code
Language used	HTML,CSS
External link / Dependencies	No
Responsive	No

A massive collection of different social media icons by Stan Williams made with pure HTML and CSS.

11. The Social Drawer

Code by	Nour Saud
Demo & download	click here for code
Language used	HTML,CSS(SCSS)
External link / Dependencies	No
Responsive	No

A very unique drawer with social links designed by Nour Saud made using HTML and CSS(SCSS).

Restaurant Website Using HTML and CSS

12. Animated Morphing Blob Social Buttons (React + Tailwind)

Code by	Mark Mead
Demo & download	click here for code
Language used	HTML,CSS(SCSS),JS(Babel)
External link / Dependencies	Yes
Responsive	No

animated morphing blog effect with CSS border-radius made by Mark Mead using HTML, CSS(SCSS), and JS(Babel)

13. Stylish Social Buttons

Code by	Chris Deacy
Demo & download	click here for code
Language used	HTML(Pug),CSS(Stylus)
External link / Dependencies	Yes
Responsive	Yes

A few cool social buttons with smooth animations by Chris Deacy were made with HTML(Pug) and CSS(Stylus).

14. Font Awesome Colored – Brand And Social Icons

Code by	Amey Raut
Demo & download	click here for code
Language used	HTML,CSS
External link / Dependencies	Yes
Responsive	Yes

Font Awesome Brand and social Icons with brand color. These are made by Amey Raut using HTML and CSS.

15. CSS Social Media Icons

Code by	Muhammet Hayran
Demo & download	click here for code
Language used	HTML,CSS
External link / Dependencies	No
Responsive	Yes

Social Media Icons using Pure CSS and font awesome library made by Muhammet Hayran by using HTML and CSS

16. Fancy Hover Social Buttons

Code by	Ben Hodgson
Demo & download	click here for code
Language used	HTML,CSS(SCSS)
External link / Dependencies	No
Responsive	Yes

Let’s end our list with Fluid social network buttons by Ben Hodgson. On hover, the network logo disappears into the distance, and text with the name of the network appears with blur/opacity filters. Uses Sass (SCSS) + Autoprefixer.

That’s it, folks. In this article, we shared 15+ CSS Social Buttons & Icons with cool and different designs. We have covered a lot in this article from simple and clean social icons & buttons to 3D social icons & Buttons and also a few massive collections of social icons.

Hope you liked this article. Share this with your fellow developers. Comment down below your thoughts and suggestions, we would love to hear from you.

See our other articles on codewithrandom and gain knowledge in Front-End Development.

Thank you and keep learning!!

follow us on Instagram: @codewith_random
Written by: @ayushgoel