Demo for Social Buttons Code with Glitch Effect

Preview

Source Code

                            <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.devanswer.com -->


<style>
.flex-center {
  width: 100%;
  min-height: 50vh;
  background: #000;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
  -ms-flex-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  align-items: center;
}
.icon-3d {
  padding: 10px;
  -webkit-animation: icon3d 200ms 10;
  animation: icon3d 200ms 10;
  color: #fff;
}
.icon-3d:hover {
  -webkit-animation: icon3d 200ms infinite;
  animation: icon3d 200ms infinite;
}
@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>

</head>
<body>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'>
<div class="flex-center">
  <i class="fa fa-github fa-4x icon-3d"></i>
  <i class="fa fa-gitlab fa-4x icon-3d"></i>
  <i class="fa fa-bitbucket fa-4x icon-3d"></i>
  <i class="fa fa-git fa-4x icon-3d"></i>
</div>
<div class="flex-center">
  <i class="fa fa-twitter fa-4x icon-3d"></i>
  <i class="fa fa-facebook fa-4x icon-3d"></i>
  <i class="fa fa-instagram fa-4x icon-3d"></i>
  <i class="fa fa-whatsapp fa-4x icon-3d"></i>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Developers Answer</a></div>

</body>
</html>

Other Codes

Sliding Social Buttons Code

In this code we have 4 social buttons. These buttons have a hover effect. Each button at the time of hovering pulls back the drawer next to it and can . . .

HTML Social Buttons on Sidebar with Followers . . .

In this code, social buttons are located next to the page. Normally, 4 buttons are displayed. By clicking on the more option, the other buttons are also . . .

Multiple Social Buttons Examples with Hover . . .

Several models of social buttons with different backgrounds and effects in hover Time are provided in this code.

Dynamic Social Buttons with Gradient Background

We have several social buttons in this code. These social buttons have a gradient background in hover mode. Normally their background is light.