button.sheen{
  position:relative;
  overflow: hidden;
  padding: 14px 30px;
  font-weight:900;
  font-size: 22px;
  border-radius:5px;
  border:0;
  color: #FFF45F;
  text-transform:uppercase;
  box-shadow:-2px 2px 2px #ccc;
  background-color: var(--color14);
}

/*        sheen effect      */
/*This is the base aniamtion*/
.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.5) 50%, rgba(229, 172, 142, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}
/*This activates the sheen once the button has been hovered*/
.sheen:hover::after, button.sheen:focus::after {
  animation: sheen 1s forwards;
}
@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}

button.sheen:active{
  box-shadow:0px 0px 0px white;
  -webkit-box-shadow: inset -2px 2px 2px #ccc;
  -moz-box-shadow:    inset -2px 2px 2px #ccc;
  box-shadow:         inset -2px 2px 2px #ccc;
  transform:translate(0, 2px);
  color:#FFC491;
  background-color: var(--color7);
}
button.sheen:focus{
  outline:0;
}