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)

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

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

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!!!

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

5. Social Buttons

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

6. SVG Social Media Icons

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

7. SVG Social Icons

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

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

9. Media Icons

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

10. CSS social buttons and icons

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

11. The Social Drawer

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)

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

13. Stylish Social Buttons

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

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

15. CSS Social Media Icons

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

16. Fancy Hover Social Buttons

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