When the overall theme of your website is dark, you can use social buttons that match the theme of your website. In this code, we have one of the same buttons. These buttons work in such a way that by placing the mouse cursor on each glitch effect is executed on that button.
HTML
<!-- This script got from www.devanswer.com -->
<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>
CSS
.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;
}
}
