Table of Contents

DARK SOCIAL ICONS

See the Pen social dark by Metty (@Metty) on CodePen.

Author

  • Metty

Made with

  • HTML / CSS

SOCIAL MEDIA ICONS

Social media icons with hover and inverse actions.

See the Pen Media Icons by matt henley (@mattbhenley) on CodePen.

Author

  • matt henley

Made with

  • HTML / CSS (SCSS)

3D – CSS SOCIAL TILES

See the Pen 3D – CSS Social Tiles by Stockin (@Stockin) on CodePen.

Author

  • Stockin

Made with

  • HTML / CSS

SOCIAL MEDIA ICONS

Floating social media icons in HTML and CSS.

See the Pen Social Media Icons – Floating by Stockin (@Stockin) on CodePen.

Author

  • Stockin

Made with

  • HTML / CSS

THE SOCIAL DRAWER

Just another drawer for your social links.

See the Pen The Social Drawer by Nour Saud (@nourabusoud) on CodePen.

Author

  • Nour Saud

Made with

  • HTML / CSS (SCSS)

SOCIAL ICONS

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

See the Pen Social Icons vision 3D by Miguel Cast (@miguelcast) on CodePen.

Author

  • Miguel Cast

Made with

  • HTML / CSS (SCSS)

SOCIAL BUTTONS

Pure CSS social buttons.

See the Pen Social Buttons by Dariusz Syncerek (@dsyncerek) on CodePen.

Author

  • Dariusz Syncerek

Made with

  • HTML / CSS (SCSS)

CSS3 SOCIAL BUTTONS VOL.2

Social buttons with CSS3 transitions.

See the Pen CSS3 Social buttons vol.2 by foxeisen (@foxeisen) on CodePen.

Author

  • fox_hover

Made with

  • HTML / CSS (SCSS)

CSS3 SOCIAL BUTTONS VOL.1

Social buttons with CSS3 transitions.

See the Pen CSS3 Social buttons vol.1 by foxeisen (@foxeisen) on CodePen.

Author

  • fox_hover

Made with

  • HTML / CSS (SCSS)

ONLY CSS DIRECTION-AWARE CUBE SOCIAL LINKS

See the Pen CSS-Only Direction-Aware Cube Links by Gabrielle Wee 🧧 (@gabriellewee) on CodePen.

Author

  • Gabrielle Wee

Made with

  • HTML (Haml) / CSS (SCSS)

SOCIAL BUTTONS WITH TOOLTIPS

See the Pen Social Buttons with Tooltips by Luis Espinosa (@Limbian) on CodePen.

Author

  • Luis Espinosa

Made with

  • HTML (Pug) / CSS (SCSS)

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.

See the Pen Social Connect by Anthony Koch (@anthonykoch) on CodePen.

Author

  • Anthony Koch

Made with

  • HTML / CSS / JavaScript

CLEAN SOCIAL BUTTONS

Free HTML and CSS social buttons.

See the Pen Clean Social Buttons – FREE by Michael Rossi (@michaelrossi) on CodePen.

Author

  • Michael Rossi

Made with

  • HTML / CSS (Less)

STYLISH SOCIAL BUTTONS

A few cool social buttons with smooth animations.

See the Pen Stylish Social Buttons by Chris Deacy (@chrisdothtml) on CodePen.

Author

  • Chris Deacy

Made with

  • HTML (Pug) / CSS (Stylus)

SVG SOCIAL ICONS

Round social icons in SVG, HTML and CSS.

See the Pen SVG Social Icons by Kevin Dewar (@eskside_design) on CodePen.

Author

  • Kevin Dewar

Made with

  • HTML / CSS (SCSS)

SOCIAL LINKS

HTML and CSS social diamond links.

See the Pen Social Links by Sazzad (@sazzad) on CodePen.

Author

  • Sazzad

Made with

  • HTML / CSS

SOCIAL MEDIA ICONS

Social media hover icons with pop-up titles.

See the Pen Social media hover icons with pop-up titles by Kieran Hunter (@kieranfivestars) on CodePen.

Author

  • Kieran Hunter

Made with

  • HTML / CSS

SOCIAL MEDIA ICONS

Social media icon reveal with transition.

See the Pen Social Media icon reveal with transition by Stefan Göllner (@goellner) on CodePen.

Author

  • Stefan Göllner

Made with

  • HTML / CSS (SCSS)

SOCIAL FLIP CARDS

Messing around with 3d transforms and delayed transitions.

See the Pen Social Flip Cards by Charlotte Dann (@pouretrebelle) on CodePen.

Author

  • Charlotte Dann

Made with

  • HTML / CSS (SCSS)