/* From Uiverse.io by javierBarroso */ 
.parent {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 47px;
}

.child {
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  transform-style: preserve-3d;
  transition: all 0.3s cubic-bezier(0.68, 0.85, 0.265, 1.85);
  border-radius: 5px;
  margin: 0 6px;

}

.child:hover {
  background-color: white;
  background-position:    -100px 100px,    -100px 100px;
  /*transform: rotate3d(0.5, 1, 0, 30deg);
  */
  transform: perspective(180px) rotateX(60deg) translateY(2px);
  -webkit-transform: perspective(180px) rotateX(60deg) translateY(2px);
  -moz-transform: perspective(180px) rotateX(60deg) translateY(2px);
  -ms-transform: perspective(180px) rotateX(60deg) translateY(2px);
  -o-transform: perspective(180px) rotateX(60deg) translateY(2px);
}


.child-2:hover {
  box-shadow: 0px 10px 10px #d82d7e ;
}
.child-3:hover {
  box-shadow: 0px 10px 10px #0575b3;
}
.child-1:hover {
  box-shadow: 0px 10px 10px #4267b2;
}

.child-5:hover {
  box-shadow: 0px 10px 10px #000;
}
.child-6:hover {
  box-shadow: 0px 10px 10px #e21a20;
}

.button {
  cursor: pointer;
  width: 100%;
  height: 100%;
  border: none;
  background-color: #ffffff;
  font-size: 20px;
  transition-duration: 0.5s;
  transition-timing-function: cubic-bezier(0.68, -0.85, 0.265, 1.55);
  border-radius: 50px;
}

.child:hover > .button {
  transform: translate3d(0px, 20px, 30px) perspective(80px) rotateX(-60deg)
    translateY(2px) translateZ(10px);
}