Collection of hand-picked free HTML and CSS social media icon and button code examples.

  1. CSS Social Share Buttons
Demo image: Dark Social Icons Dark Social Icons - GIF Demo

Creator

  • Metty

Programming language

  • HTML / CSS

Information the code

Dark Social Icons

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Social Media Icons Social Media Icons - GIF Demo

Creator

  • matt henley

Programming language

  • HTML / CSS (SCSS)

Information the code

Social Media Icons

Social media icons with hover and inverse actions.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Social Media 3D Ghost Buttons Social Media 3D Ghost Buttons - GIF Demo

Creator

  • Ashish Anand

Programming language

  • HTML / CSS

Information the code

Social Media 3D Ghost Buttons

These 3D ghost buttons are designed using just HTML and CSS. Hover over these buttons to see the 3D effect.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: 3D - CSS Social Tiles 3D - CSS Social Tiles - GIF Demo

Creator

  • Stockin

Programming language

  • HTML / CSS

Information the code

3D – CSS Social Tiles

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Social Media Icons Social Media Icons - GIF Demo

Creator

  • Stockin

Programming language

  • HTML / CSS

Information the code

Social Media Icons

Floating social media icons in HTML and CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: The Social Drawer The Social Drawer - GIF Demo

Creator

  • Nour Saud

Programming language

  • HTML / CSS (SCSS)

Information the code

The Social Drawer

Just another drawer for your social links.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Social Icons Social Icons - GIF Demo

Creator

  • Miguel Cast

Programming language

  • HTML / CSS (SCSS)

Information the code

Social Icons

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

Browser Support: Chrome, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Social Buttons Social Buttons - GIF Demo

Creator

  • Dariusz Syncerek

Programming language

  • HTML / CSS (SCSS)

Information the code

Social Buttons

Pure CSS social buttons.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: CSS3 Social Buttons Vol.2 CSS3 Social Buttons Vol.2 - GIF Demo

Creator

  • fox_hover

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS3 Social Buttons Vol.2

Social buttons with CSS3 transitions.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: CSS3 Social Buttons Vol.1 CSS3 Social Buttons Vol.1 - GIF Demo

Creator

  • fox_hover

Programming language

  • HTML / CSS (SCSS)

Information the code

CSS3 Social Buttons Vol.1

Social buttons with CSS3 transitions.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Only CSS Direction-Aware Cube Social Download Only CSS Direction-Aware Cube Social Download - GIF Demo

Creator

  • Gabrielle Wee

Programming language

  • HTML (Haml) / CSS (SCSS)

Information the code

Only CSS Direction-Aware Cube Social Download

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Social Buttons with Tooltips Social Buttons with Tooltips - GIF Demo

Creator

  • Luis Espinosa

Programming language

  • HTML (Pug) / CSS (SCSS)

Information the code

Social Buttons with Tooltips

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: ionicons.css

Demo image: Social Connect Social Connect - GIF Demo

Creator

  • Anthony Koch

Programming language

  • HTML / CSS / JavaScript

Information the code

Social Connect

This is a design I found on Dribbble made by Paul Flavius Nechita. It’s a simple design, but it’s one of my favorites. I’ll have to work for a bit to get the box shadows the way it shows in the picture.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: ionicons.css

Demo image: Clean Social Buttons Clean Social Buttons - GIF Demo

Creator

  • Michael Rossi

Programming language

  • HTML / CSS (Less)

Information the code

Clean Social Buttons

Free HTML and CSS social buttons.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Stylish Social Buttons Stylish Social Buttons - GIF Demo

Creator

  • Chris Deacy

Programming language

  • HTML (Pug) / CSS (Stylus)

Information the code

Stylish Social Buttons

A few cool social buttons with smooth animations.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: SVG Social Icons SVG Social Icons - GIF Demo

Creator

  • Kevin Dewar

Programming language

  • HTML / CSS (SCSS)

Information the code

SVG Social Icons

Round social icons in SVG, HTML and CSS.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies:

Demo image: Social Download Social Download - GIF Demo

Creator

  • Sazzad

Programming language

  • HTML / CSS

Information the code

Social Download

HTML and CSS social diamond links.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Social Media Icons Social Media Icons - GIF Demo

Creator

  • Kieran Hunter

Programming language

  • HTML / CSS

Information the code

Social Media Icons

Social media hover icons with pop-up titles.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Social Media Icons Social Media Icons - GIF Demo

Creator

  • Stefan Göllner

Programming language

  • HTML / CSS (SCSS)

Information the code

Social Media Icons

Social media icon reveal with transition.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Social Flip Cards Social Flip Cards - GIF Demo

Creator

  • Charlotte Dann

Programming language

  • HTML / CSS (SCSS)

Information the code

Social Flip Cards

Messing around with 3d transforms and delayed transitions.

Browser Support: Chrome, Edge, Firefox, Opera, Safari

Dependencies: