Shine effect #css

shine-effect.scss

body {
  background: #222;
}

.btn {
  position: relative;
  display: inline-block;
  background: transparent;
  color: gold;
  border: 2px solid;
  
  padding: 0.75em 1.5em;
  text-decoration: none;

  /* Shine */
  &::before {
    content: '';
    position: absolute;
    inset: -4px;
    backdrop-filter: brightness(1.25) saturate(0.5); /* customise as needed */
    mask-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 1) 50%, rgba(255, 255, 255, 0) 60%);
    mask-size: 300% 100%;
    mask-position: 0% 0%;
    transition: mask-position 0.5s ease-in-out;
    pointer-events: none;
  }
  
  &:hover,
  &:focus-visible {
    &::before {
      mask-position: 100% 0%;
    }
  }
}