Button with inner shine animation

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

Preview

Html

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%);
}

.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;

    &::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;
    }

    &:hover::after {
        transform: translateX(100%);
    }
}

Description

Accessibility

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).