Getting started

Button

Card

Shine

The effect of a button that gains a slight shine over time.

Code

Just copy the following code to your project and this will work 😎

CSS

.shine-container {
  padding: 1px;
  background-color: var(--color-black-600);

  .shine-button {
    z-index: 2;
    box-shadow: 0px 0px 2px var(--color-black);
  }

  &::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: -20%;
    left: -100%;
    width: 60%;
    height: 140%;
    transform: skewX(-45deg);
    animation: shine 5s linear infinite;
    background-color: white;
    filter: blur(6px);
  }
}

@keyframes shine {
  0% {
    left: -100%;
  }
  100% {
    left: 150%;
  }
}

Example

On this page