Collection of HTML and CSS Social Media Icon and Button Code Examples

Browse a collection of free HTML and CSS social media icon and button code examples to create stylish and interactive social media links for your website.

3D Social Media Button

Author:
Nour Ibram | May 8, 2020
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css

Social Animation

Author:
Swarup Kumar Kuila | September 24, 2019
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
bootstrap.css, font-awesome.css, font-awesome-animation.css

Glass Effect Social Media Buttons with Neon Glow

Author:
Kevin Miranda | May 20, 2019
Made with:
HTML / CSS (SCSS)

About a code

A CSS only implementation of glass-like neon glow buttons with text gradients & box-shadows.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
-

Social Links

Author:
Stockin | January 23, 2019
Made with:
HTML / CSS

About a code

CSS only animation for social links.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css
Dark Social Icons

Dark Social Icons

Author:
Metty | November 18, 2018
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css

Fancy Hover Animation

Author:
Akshay | November 12, 2018
Made with:
HTML (Pug) / CSS (Sass)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css
Social Media Icons

Social Media Icons

Author:
matt henley | October 20, 2018
Made with:
HTML / CSS (SCSS)

About a code

Social media icons with hover and inverse actions.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
3D - CSS Social Tiles

3D - CSS Social Tiles

Author:
Stockin | September 28, 2018
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
Social Media Icons

Social Media Icons

Author:
Stockin | September 27, 2018
Made with:
HTML / CSS

About a code

Floating social media icons in HTML and CSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
The Social Drawer

The Social Drawer

Author:
Nour Saud | February 13, 2018
Made with:
HTML / CSS (SCSS)

About a code

Just another drawer for your social links.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Group Button with SVG Icons

Group Button with SVG Icons

Author:
Grzegorz Witczak | November 1, 2017
Made with:
HTML / CSS (Stylus) / JavaScript

About a code

Group button with svg icons, based on dribble project: https://dribbble.com/shots/694671-Buttons-Free-PSD

Social Icons

Social Icons

Author:
Miguel Cast | July 6, 2017
Made with:
HTML / CSS (SCSS)

About a code

Social icons with vision 3D effect in HTML and CSS.

Compatible browsers:
Chrome, Firefox, Opera, Safari
Dependencies:
font-awesome.css
Social Buttons

Social Buttons

Author:
Dariusz Syncerek | June 11, 2017
Made with:
HTML / CSS (SCSS)

About a code

Pure CSS social buttons.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
CSS3 Social Buttons Vol.2

CSS3 Social Buttons Vol.2

Author:
fox_hover | March 27, 2017
Made with:
HTML / CSS (SCSS)

About a code

Social buttons with CSS3 transitions.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
CSS3 Social Buttons Vol.1

CSS3 Social Buttons Vol.1

Author:
fox_hover | March 5, 2017
Made with:
HTML / CSS (SCSS)

About a code

Social buttons with CSS3 transitions.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
Only CSS Direction-Aware Cube Social Links

Only CSS Direction-Aware Cube Social Links

Author:
Gabrielle Wee | January 20, 2017
Made with:
HTML (Haml) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-

Social Buttons

Author:
Thea | November 27, 2016
Made with:
HTML / CSS

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
no
Dependencies:
font-awesome.css
Social Buttons with Tooltips

Social Buttons with Tooltips

Author:
Luis Espinosa | August 29, 2016
Made with:
HTML (Pug) / CSS (SCSS)

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
ionicons.css
Social Buttons With Icon Fonts

Social Buttons With Icon Fonts

Author:
David Pottrell | June 6, 2016
Made with:
HTML / CSS

About a code

Another set of social buttons for anyone to use/take inspiration from. This set takes advantage of Font Awesome icon pack.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Responsive:
yes
Dependencies:
font-awesome.css
Social Connect

Social Connect

Author:
Anthony Koch | October 23, 2015
Made with:
HTML / CSS / JavaScript

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
ionicons.css
Clean Social Buttons

Clean Social Buttons

Author:
Michael Rossi | October 21, 2015
Made with:
HTML / CSS (Less)

About a code

Free HTML and CSS social buttons.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
Stylish Social Buttons

Stylish Social Buttons

Author:
Chris Deacy | March 20, 2015
Made with:
HTML (Pug) / CSS (Stylus)

About a code

A few cool social buttons with smooth animations.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
SVG Social Icons

SVG Social Icons

Author:
Kevin Dewar | March 13, 2015
Made with:
HTML / CSS (SCSS)

About a code

Round social icons in SVG, HTML and CSS.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-
Social Links

Social Links

Author:
Sazzad | February 11, 2015
Made with:
HTML / CSS

About a code

HTML and CSS social diamond links.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
Social Media Icons

Social Media Icons

Author:
Kieran Hunter | November 13, 2014
Made with:
HTML / CSS

About a code

Social media hover icons with pop-up titles.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
Social Media Icons

Social Media Icons

Author:
Stefan Göllner | June 17, 2013
Made with:
HTML / CSS (SCSS)

About a code

Social media icon reveal with transition.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
font-awesome.css
Social Flip Cards

Social Flip Cards

Author:
Charlotte Dann | August 5, 2012
Made with:
HTML / CSS (SCSS)

About a code

Messing around with 3d transforms and delayed transitions.

Compatible browsers:
Chrome, Edge, Firefox, Opera, Safari
Dependencies:
-

Discover Our Extensive Snippet Library

This heading suggests that your website provides a wide variety of snippets across different technologies, encouraging users to explore and use these resources for their development projects.

HTML Snippets.

Explore a collection of HTML snippets designed to streamline your web development process. From basic structures to complex elements.

CSS Snippets.

Discover powerful CSS snippets that help you style your web pages with ease. Whether you need layout solutions, animations

JavaScript Snippets.

Enhance your website's interactivity with our JavaScript snippets. From DOM manipulation to advanced algorithms

Bootstrap Snippets.

Leverage the power of Bootstrap with our collection of snippets. Quickly integrate responsive design components

Tailwind Snippets.

Speed up your development process with Tailwind CSS snippets. These utility-first CSS snippets enable you to

jQuery Snippets.

Simplify your JavaScript development with jQuery snippets. Easily perform common tasks like event handling, animations

React Snippets.

Build robust, component-based user interfaces with our React snippets. From state management to lifecycle methods,

Vue Snippets.

Streamline Vue.js development with our collection of snippets for creating components, managing state, and handling events.

Ready to set your Brand ablaze?

Let's craft a visual identity that ignites passion and loyalty. ✨