ADVERTISEMENT

15+ Social Media Icons & Buttons Using HTML CSS

Telegram Group Join Now

ADVERTISEMENT

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.

ADVERTISEMENT

ADVERTISEMENT

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.

ADVERTISEMENT

1. Floating Social Buttons (Font Awesome)

ADVERTISEMENT

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

ADVERTISEMENT

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

ADVERTISEMENT

ADVERTISEMENT

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).

ADVERTISEMENT

5. Social Buttons

ADVERTISEMENT

ADVERTISEMENT

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)

ADVERTISEMENT

6. SVG Social Media Icons

ADVERTISEMENT

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

ADVERTISEMENT

Telegram Group Join Now

Share on:

Leave a Comment

ADVERTISEMENT

ADVERTISEMENT

ADVERTISEMENT