.btn {
  max-width: 150px;
  position: relative;
  overflow: hidden;
  padding: 5px 40px;
  border: 1px solid #999;
  border-radius: 5px;
  color: #fff;
  font-size: 14px;
}

.btn::after {
  content: "";
  position: absolute;
  top: -50%;
  right: -50%;
  bottom: -50%;
  left: -50%;
  background: linear-gradient(
    to bottom,
    rgba(172, 255, 172, 0),
    rgba(255,255,255,0.75) 50%,
    rgba(172, 255, 172, 0));
  transform: rotateZ(60deg) translate(-5em, 7.5em);
}
.btn:hover::after, .btn:focus::after {
  animation: sheen 1s forwards;
}
@keyframes sheen {
  100% {
    transform: rotateZ(60deg) translate(1em, -9em);
  }
}