/*        sheen effect      */
/*This is the base aniamtion*/
.sheen {
  position: relative;
  overflow: hidden;
}

.sheen:after {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(to bottom, rgba(229, 172, 142, 0), rgba(255, 255, 255, 0.2) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-10em, 10em);
}

/*This activates the sheen once the button has been hovered*/
.sheen:hover::after {
  animation: sheen 1s forwards;
}

@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}