.shiny {
  background-color: #0070C9;
  padding: 10px;
  color: white;
  border-radius: 5px;
  transition: 200ms ease-in;
  overflow: hidden;
  position: relative;
}

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

.shiny:hover {
  transform: scale(1.2);
}

.shiny::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);
}

.shiny:hover::after, .shiny:focus::after {
  animation: sheen 1s forwards;
}