3d Social Icons with animation using CSS3

social icons with css3 animation

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 bbuttons in your pages

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

Advertisement