styles.css

body{
  margin : 0;
  padding: 0;
}

.social{
  position  : absolute;
  text-align: center;
  top       : 50%;
  transform : translateY(-50%);
  width     : 100%;
}

.btn{
  background-color: #f1f1f1;
  border-radius   : 30%;
  box-shadow      : 0 5px 15px -5px #00000070;
  color           : #3498DB;
  display         : inline-block;
  height          : 90px;
  margin          : 0 15px;
  overflow        : hidden;
  position        : relative;
  width           : 90px;
}

.btn i{
  line-height: 90px;
  font-size  : 26px;
  transition: 0.2 linear;
}

.btn:hover i{
  color    : #F1F1F1;
  transform: scale(1.3);
}

.btn::before{
  background-color: #3498DB;
  content         : '';
  height          : 120%;
  position        : absolute;
  transform       : rotate(45deg);
  width           : 120%;
  left            : -110%;
  top             : 90%;
 }

 .btn:hover::before{
   animation: socialAnimation 0.7s 1;
   left     : -10%;
   top      : -10%;
 }

 @keyframes socialAnimation{
   0%{
     left: -110%;
     top : 90%;
   }
   50%{
     left: 10%;
     top : -30%;
   }
   100%{
     left: -10%;
     top : -10%;
   }
 }