<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet"> <div class="container"> <h2 style="text-align:center">Animation by <span class="red" style="color:red">M</span>ilind <span class="red" style="color:red">K</span>amthe</h2> <p style="text-align:center">creativemk22@gmail.com</p> <hr> <div class="row" style="margin:0 auto; width:60%"> <div class="social_lock"> <div class="social_case"></div> <div class="mk"><i class="fa fa-facebook vmk1 mvm"></i></div> </div> <div class="social_lock"> <div class="social_case2"></div> <div class="mk"><i class="fa fa-linkedin vmk1 vm"></i></div> </div> <div class="social_lock"> <div class="social_case3"></div> <div class="mk"><i class="fa fa-twitter vmk1 vm"></i></div> </div> <div class="social_lock"> <div class="social_case4"></div> <div class="mk"><i class="fa fa-instagram vmk1"></i></div> </div> </div> </div>

.social_case{ width:100px;height:100px;background:#385596;transform:rotate(45deg); animation:my_anm1 1s linear infinite;} .social_lock{position:relative;width:100px;height:100px;margin-right:50px;margin-top:30px;} .vmk1{ font-size:60px !important; color:#fff; } .social_lock:hover .vm{animation:moving 1s linear infinite alternate;} .mvm{animation:moving 1s linear infinite alternate;} @keyframes moving{ from{transform:skew(15deg);} to{transform:skew(0deg)} } .social_case2{ width:100px;height:100px;background:#0070B0;transform:rotate(45deg); } .social_case2:hover{animation:my_anm2 1s linear infinite} .social_case3{ width:100px;height:100px;background:#5689C4;transform:rotate(45deg); } .social_case3:hover{animation:my_anm1 1s linear infinite} .social_case4{ width:100px;height:100px;background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%,#d6249f 60%,#285AEB 90%) !important;transform:rotate(45deg); } .social_case4:hover{animation:my_anm2 1s linear infinite} .mk{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);} @keyframes my_anm1{ from{transform:rotate(0deg);} to{transform:rotate(360deg);} } @keyframes my_anm2{ from{transform:rotate(0deg);} to{transform:rotate(-360deg);} }