20 CSS Social Media Icons

1,174 阅读3分钟
原文链接: freefrontend.com

20 CSS Social Media Icons

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

Demo image: Dark Social Icons Dark Social Icons - GIF Demo

Author

  • Metty

Made with

  • HTML / CSS

About the code

Dark Social Icons

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

Dependencies: font-awesome.css

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

Author

  • matt henley

Made with

  • HTML / CSS (SCSS)

About the code

Social Media Icons

Social media icons with hover and inverse actions.

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

Dependencies: font-awesome.css

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

Author

  • Ashish Anand

Made with

  • HTML / CSS

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

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

Dependencies: font-awesome.css

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

Author

  • Stockin

Made with

  • HTML / CSS

About the code

3D - CSS Social Tiles

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

Dependencies: font-awesome.css

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

Author

  • Stockin

Made with

  • HTML / CSS

About the code

Social Media Icons

Floating social media icons in HTML and CSS.

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

Dependencies: font-awesome.css

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

Author

  • Nour Saud

Made with

  • HTML / CSS (SCSS)

About the code

The Social Drawer

Just another drawer for your social links.

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

Dependencies: -

Demo image: Social Icons Social Icons - GIF Demo

Author

  • Miguel Cast

Made with

  • HTML / CSS (SCSS)

About the code

Social Icons

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

Compatible browsers: Chrome, Firefox, Opera, Safari

Dependencies: font-awesome.css

Demo image: Social Buttons Social Buttons - GIF Demo

Author

  • Dariusz Syncerek

Made with

  • HTML / CSS (SCSS)

About the code

Social Buttons

Pure CSS social buttons.

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

Dependencies: font-awesome.css

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

Author

  • fox_hover

Made with

  • HTML / CSS (SCSS)

About the code

CSS3 Social Buttons Vol.2

Social buttons with CSS3 transitions.

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

Dependencies: font-awesome.css

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

Author

  • fox_hover

Made with

  • HTML / CSS (SCSS)

About the code

CSS3 Social Buttons Vol.1

Social buttons with CSS3 transitions.

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

Dependencies: font-awesome.css

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

Author

  • Gabrielle Wee

Made with

  • HTML (Haml) / CSS (SCSS)

About the code

Only CSS Direction-Aware Cube Social Links

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

Dependencies: -

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

Author

  • Luis Espinosa

Made with

  • HTML (Pug) / CSS (SCSS)

About the code

Social Buttons with Tooltips

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

Dependencies: ionicons.css

Demo image: Social Connect Social Connect - GIF Demo

Author

  • Anthony Koch

Made with

  • HTML / CSS / JavaScript

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

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

Dependencies: ionicons.css

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

Author

  • Michael Rossi

Made with

  • HTML / CSS (Less)

About the code

Clean Social Buttons

Free HTML and CSS social buttons.

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

Dependencies: font-awesome.css

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

Author

  • Chris Deacy

Made with

  • HTML (Pug) / CSS (Stylus)

About the code

Stylish Social Buttons

A few cool social buttons with smooth animations.

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

Dependencies: font-awesome.css

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

Author

  • Kevin Dewar

Made with

  • HTML / CSS (SCSS)

About the code

SVG Social Icons

Round social icons in SVG, HTML and CSS.

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

Dependencies: -

Demo image: Social Links Social Links - GIF Demo

Author

  • Sazzad

Made with

  • HTML / CSS

About the code

Social Links

HTML and CSS social diamond links.

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

Dependencies: font-awesome.css

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

Author

  • Kieran Hunter

Made with

  • HTML / CSS

About the code

Social Media Icons

Social media hover icons with pop-up titles.

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

Dependencies: font-awesome.css

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

Author

  • Stefan Göllner

Made with

  • HTML / CSS (SCSS)

About the code

Social Media Icons

Social media icon reveal with transition.

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

Dependencies: font-awesome.css

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

Author

  • Charlotte Dann

Made with

  • HTML / CSS (SCSS)

About the code

Social Flip Cards

Messing around with 3d transforms and delayed transitions.

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

Dependencies: -