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
ADVERTISEMENT
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.
ADVERTISEMENT
Portfolio Website Using HTML ,CSS ,Bootstrap and JavaScript
ADVERTISEMENT
8. 3D – CSS Social Tiles
ADVERTISEMENT
ADVERTISEMENT
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