body {
  margin:0;
  padding:0;
  background: #dedede;
}

ul {
  position:absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  margin:0;
  padding:0;
  display:flex;
}

ul li {
  list-style: none;
}

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

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

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

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

ul li:nth-child(2) a:hover .fab {
  color: orangered;
}

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

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

ul li:nth-child(5) a:hover .fab {
  color: #264ac0;
}
ul li:nth-child(6) a:hover .fab {
  color: #29ccf1;
}
ul li:nth-child(7) a:hover .fab {
  color: #20e84e;
}
ul li:nth-child(8) a:hover .fab {
  color: #000000;
}
ul li:nth-child(9) a:hover .fab {
  color: #b3c026;
}