Create a hyperlink with a skewed gradient background that sweeps left to right on hover.

by Osama Qassar

HTML

<a href="" class="shine">
  HELLO WORLD
</a>

CSS

*{background-color: red;}
a{
  font-size: 50px;
}
a.shine{
  position: relative;
  display: inline-block;
  padding: .5rem 1rem;
  border-radius: .6rem;
  text-decoration: none;
  color: #fff;
  background: #1f2937; /* base */
  overflow: hidden;
}

a.shine::after{
  content: "";
  position: absolute;
  top: -50%;
  left: -120%;
  width: 60%;
  height: 200%;
  transform: skewX(-20deg);
  background: linear-gradient(
    to right,
    transparent 0%,
    rgba(255,255,255,.15) 35%,
    rgba(255,255,255,.55) 50%,
    rgba(255,255,255,.15) 65%,
    transparent 100%
  );
  opacity: 0;
  pointer-events: none;
}

a.shine:hover::after{
  opacity: 1;
  animation: shine-sweep 900ms ease-in-out;
}

@keyframes shine-sweep{
  0%   { left: -120%; }
  100% { left: 140%; }
}
a.shine::after{
  opacity: 1;
  animation: shine-sweep 2.2s ease-in-out infinite;
}