@keyframes shine {
  10% {
    opacity: 1;
    top: -30%;
    left: -30%;
    transition-property: left, top, opacity;
    transition-duration: 0.75s, 0.75s, 0.35s;
    transition-timing-function: ease;
  }
  100% {
    opacity: 0;
    top: -30%;
    left: -30%;
    transition-property: left, top, opacity;
  }
}
.shine-btn {
  position: relative;
  box-shadow: 1px 2px 8px #ccc;
  &:hover,
  &.animated {
    &:after {
      animation: shine 7s ease-in-out infinite;
      animation-fill-mode: forwards;
      content: "";
      position: absolute;
      top: -150%;
      left: -210%;
      width: 200%;
      height: 200%;
      opacity: 0;
      transform: rotate(30deg);
      background: rgba(255, 255, 255, 0.13);
      background: linear-gradient(
        to right,
        rgba(255, 255, 255, 0.13) 0%,
        rgba(255, 255, 255, 0.13) 77%,
        rgba(255, 255, 255, 0.5) 92%,
        rgba(255, 255, 255, 0) 100%
      );
    }
  }
  &.blue-btn:active {
    .bc(@darkBlue);
  }
  &.pink-btn:active {
    .bc(@darkPink);
  }
  &.green-btn:active {
    .bc(@darkGreen);
  }

  &.yellow-btn:active {
    .bc(@darkYellow);
  }

  &.red-btn:active {
    .bc(@darkRed);
  }

  &.purple-btn:active {
    .bc(@darkPurple);
  }

  &.orange-btn:active {
    .bc(@darkOrange);
  }
  &:active {
    &:after {
      opacity: 0;
    }
  }
  .shine-btn {
    &:hover {
      &:before {
        top: -110%;
        visibility: visible;
      }
    }
  }
}