Button with inner shine animation

HTML button element that has a shine effect on hover using a simple transition.



Click to edit (doesn't update preview)

<a href="#" class="shine-button">Hover me</a>


Click to edit (doesn't update preview)

.shine-button {
  padding: 1rem 2rem;
  color: #fff;
  text-decoration: none;
  position: relative;
  overflow: clip;
  background-color: #003989;
  border-radius: 0.25rem;
  text-transform: uppercase;
  font-weight: 600;
  font-size: 0.9rem;

.shine-button::after {
  content: "";
  position: absolute;
  transition: all 0.3s ease-in-out 0s;
  background: linear-gradient(to right, transparent, #fff, transparent);
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
  overflow: hidden;
  opacity: 0.75;

.shine-button:hover::after {
  transform: translateX(100%);



This component uses REM units for better font scaling.

Changing the color

The background button color can be changed by changing the background-color on the .shine-button class. The shine color can be changed by editing the ::after pseudo element background color (currently #fff, keep the transparents).