ul.social {
  margin:0;
  margin-left: -15px;
  padding:0;
  display:flex;
}

ul.social li {
  list-style: none;
}

ul.social li a {
  position: relative;
  width:50px;
  height:50px;
  display:block;
  text-align:center;
  margin:0 10px;
  border-radius: 50%;
  padding: 6px;
  box-sizing: border-box;
  text-decoration:none;
  background: linear-gradient(0deg, #ddd, #fff);
  transition: .5s;
}

ul.social li a:hover {
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  text-decoration:none;
}

ul.social li a .fab {
  width: 100%;
  height:100%;
  display:block;
  background: linear-gradient(0deg, #fff, #ddd);
  border-radius: 50%;
  line-height: calc(60px - 18px);
  font-size:21px;
  color: #262626;
  transition: .5s;
}

ul.social li:nth-child(1) a:hover .fab {
  color: #3b5998;
}

ul.social li:nth-child(2) a:hover .fab {
  background: radial-gradient(circle at 33% 100%, #fed373 4%, #f15245 30%, #d92e7f 62%, #9b36b7 85%, #515ecf);
    color: #fff;
}

ul.social li:nth-child(3) a:hover .fab {
  color: #3b5998;
}

ul.social li:nth-child(4) a:hover .fab {
  color: #c31313;
}

ul.social li:nth-child(5) a:hover .fab {
  color: #e4405f;
}