w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube
w3tweaks
Home CSS Code Demos
3d Social Icons with animation using CSS3

3d Social Icons with animation using CSS3

W3TWEAKS by W3TWEAKS
September 20, 2019
in CSS Code Demos
0

Animated social icons on hover with 3d effects using font awesome.

You can use the free social animated icons demo code with 3d effects for your pages. Find the below codes to integrate the social buttons in your pages

You might also like

CSS Shapes Forest Collection Spring Summer 2020

CSS Shapes Forest Collection Spring Summer 2020

October 11, 2020
0
CSS Button Concept for Remove and Success

CSS Button Concept for Remove and Success

August 21, 2019
0

3d Social icons

Include font-awesome .css file and add CSS code below

<!-- Font awesome Icons --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- CSS code --> <style>   .flex-center {     width: 100%;     min-height: 10vh;     display: flex;     justify-content: center;     align-items: center;   }    .icon-3d {     padding: 10px;     animation: icon3d 200ms 10;     color: #fff;     margin: 30px 30px;   }   .icon-3d:hover {     animation: icon3d 200ms infinite;   }    .gitHub{     color: #000000;   }   .gitLab{     color: #fc6d26;   }   .bitBucket{     color: #205081;   }   .git{     color: #3d2d00;   }   .twitter{     color: #55acee;   }   .facebook{     color: #3b5998;   }   .instagram{     background: radial-gradient(circle farthest-corner at 35% 90%, #fec564, rgba(0, 0, 0, 0) 50%), radial-gradient(circle farthest-corner at 0 140%, #fec564, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 0 -25%, #5258cf, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 20% -50%, #5258cf, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 100% 0, #893dc2, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 60% -20%, #893dc2, rgba(0, 0, 0, 0) 50%), radial-gradient(ellipse farthest-corner at 100% 100%, #d9317a, rgba(0, 0, 0, 0)), linear-gradient(#6559ca, #bc318f 30%, #e33f5f 50%, #f77638 70%, #fec66d 100%);     border-radius: 21%;   }   .whatsapp{     color: #25d366;   }   .linkedin{     color: #007ab6;   }   .googlePlus{     color: #dc4e41;   }   .pinterest{     color: #bd081b;   }   .youtube{     color: #fe0000;   }   @keyframes icon3d {     0% {       text-shadow: 5px 4px #f44336, -5px -6px #2196f3;     }     25% {       text-shadow: -5px -6px #f44336, 5px 4px #2196f3;     }     50% {       text-shadow: 5px -4px #f44336, -8px 4px #2196f3;     }     75% {       text-shadow: -8px -4px #f44336, -5px -4px #2196f3;     }     100% {       text-shadow: -5px 0 #f44336, 5px -4px #2196f3;     }   } </style>

Add below html code

<div class="flex-center">   <i class="fa fa-github fa-4x icon-3d gitHub"></i>   <i class="fa fa-gitlab fa-4x icon-3d gitLab"></i>   <i class="fa fa-bitbucket fa-4x icon-3d bitBucket"></i>   <i class="fa fa-git fa-4x icon-3d git"></i> </div> <div class="flex-center">   <i class="fa fa-twitter fa-4x icon-3d twitter"></i>   <i class="fa fa-facebook fa-4x icon-3d facebook"></i>   <i class="fa fa-instagram fa-4x icon-3d instagram"></i>   <i class="fa fa-whatsapp fa-4x icon-3d whatsapp"></i> </div> <div class="flex-center">   <i class="fa fa-linkedin fa-4x icon-3d linkedin"></i>   <i class="fa fa-google-plus fa-4x icon-3d googlePlus"></i>   <i class="fa fa-pinterest fa-4x icon-3d pinterest"></i>   <i class="fa fa-youtube fa-4x icon-3d youtube"></i> </div>

Demo

Tags: animatedanimationCSScss buttonscss3effectfonticoniconsSocialsocial buttonssocial iconssocial share buttons
Previous Post

Iterate javascript object keys using angularjs ngRepeat

Next Post

Display shapes in html using CSS 3

W3TWEAKS

W3TWEAKS

Since I've had a strong background in front-end development, I took the initiative to start my own website (w3tweaks.com) to share my knowledge with the world.

Related Stories

CSS Shapes Forest Collection Spring Summer 2020

CSS Shapes Forest Collection Spring Summer 2020

by W3TWEAKS
October 11, 2020
0
0

Paulina Hetman crafts a forest full of one-div CSS shapes. Click the button to assemble them into a scene! See...

CSS Button Concept for Remove and Success

CSS Button Concept for Remove and Success

by W3TWEAKS
August 21, 2019
0
0

A cool little css Button concept for delete success with hover animation with close/delete icon and developed using CSS, HTML...

Three Pure different CSS Button effects

Three Pure different CSS Button effects

by W3TWEAKS
September 25, 2019
0
0

Three Pure CSS Button effects like tap, hover and click effects developed using CSS and HTML. Demo and Download available....

Easy customizable simple CSS buttons

Easy customizable simple CSS buttons

by W3TWEAKS
September 8, 2019
0
0

A series of simple CSS buttons. They are easy to customize and use. Can easily be integrated with Font-Awesome or...

Next Post
Display shapes in html using CSS 3

Display shapes in html using CSS 3

Discussion about this post

We bring you the best frontend collections that will fix perfect for news, magazine, personal blog, etc. Check our landing page for details.

  • Effects
    • Scroll Effects
    • Text Effects
    • Shadow
  • Essentials
    • Arrows
    • Buttons
    • Background Patterns
    • Border Examples
    • Cards
    • Color Palettes
    • Dividers
    • Link styles
    • Loaders
    • Modal Windows
    • Notifications
    • Progress bar
    • Quote styles
    • Spinner
    • Tooltips
  • Media
    • Calendars
    • Carousels
    • Clocks
    • Gallery
    • Music Players
    • Sliders
    • Slideshows
    • Tables
    • Thumbnails
  • Navigation
  • Inputs
    • Range Sliders
    • Checkboxes
    • Toggle Switches
  • Scripts
    • Angularjs
    • Backbone.js
    • bootstrap
    • jQuery
    • ReactJs
    • JavaScript
    • Syntax Highlighters
    • tryit editor
    • PHP
  • API’s
    • Facebook
    • Google
    • Indeed
    • Twitter
    • YouTube