Create a shiny text link with gradient background and animates on hover.

by Osama Qassar

HTML

<a class="text-shine" href="#">Shiny text link</a>

CSS

*{background-color: red;}
a{
  font-size: 40px;
}

a.text-shine{
  text-decoration: none;
  font-weight: 700;

  /* Gradient that will move */
  background: linear-gradient(
    90deg,
    #ffffff 0%,
    #ffffff 35%,
    rgba(255,255,255,.25) 45%,
    #ffffff 50%,
    rgba(255,255,255,.25) 55%,
    #ffffff 65%,
    #ffffff 100%
  );
  background-size: 250% 100%;
  background-position: 0% 50%;

  /* Put the background *into* the text */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;          /* important */
  -webkit-text-fill-color: transparent; /* Safari */
}
/* a.text-shine{
  background: linear-gradient(
    90deg,
    rgba(255,255,255,.25) 0%,
    rgba(255,255,255,.25) 40%,
    rgba(255,255,255,1) 50%,
    rgba(255,255,255,.25) 60%,
    rgba(255,255,255,.25) 100%
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
} */

a.text-shine:hover{
  animation: text-shine 900ms ease-in-out;
}

@keyframes text-shine{
  0%   { background-position: 0% 150%; }
  100% { background-position: 100% 150%; }
}