<div>

  <h1>Button Shimmer</h1>

  <button><span>Get Started<span></button>

</div>

* {

  box-sizing: border-box;

}

html, body {

  width: 100%;

  height: 100%;

  margin: 0;

  padding: 0;

}

div {

  display: flex;

  flex-direction: column;

  gap: 2rem;

  align-items: center;

  justify-content: center;

  height: 100%;

  background-size: 100% 100%;

  background-position: 0px 0px,0px 0px,0px 0px,0px 0px,0px 0px;

  background-image: radial-gradient(49% 81% at 45% 47%, #03FF6D45 0%, #073AFF00 100%),radial-gradient(113% 91% at 17% -2%, #F8DDD4 1%, #FF000000 99%),radial-gradient(142% 91% at 83% 7%, #FAE5F4 1%, #FF000000 99%),radial-gradient(142% 91% at -6% 74%, #71CEEBFF 0%, #FF000000 99%),radial-gradient(142% 91% at 111% 84%, #E583B9 0%, #AC23D7FF 100%);

}

h1 {

  font-family: system-ui;

  font-weight: 800;

  margin: 0;

  line-height: 1;

  font-size: 5.4vw;

}

​

@property --start-angle {

  syntax: '<angle>';

  initial-value: 0deg;

  inherits: false;

}

​

@keyframes rotateTo {

  to {

    --start-angle: 18deg;

  }

}

​

@keyframes rotateBack {

  from {

    --start-angle: 18deg;

  }

  to {

    --start-angle: 0deg;

  }

}

​

$shimmer: #E4E7F7;

​

button {

  display: inline-block;

  position: relative;

  appearance: none;

  border: none;

  outline: none;

  padding: 3vmin 5vmin;

  text-rendering: geometricPrecision;

  font-family: system-ui;

  font-smooth: always;

  font-weight: 600;

  font-size: 6vmin;

  overflow: hidden;

  border-radius: 1vw;

  box-shadow: 0 5px 10px rgba(#7C7DBE,.33), 0 5px 20px rgba(#7C7DBE,.22), 0 10px 50px rgba(#7C7DBE,.22);

  background: conic-gradient(

    from 0deg at 50% 50%, 

    #D3D7E9 0%, 

    #B3B6E3 5%,

    #CEB8EC 10%,

    #B0CBDA 15%,

    #D5E5EC 20%,

    #B3B6E3 25%,

    #AED8D5 30%,

    #C8E1DE 35%,

    #AED8D5 40%,

    #A3CEDB 45%,

    #D3D7E9 50%,

    #C8E1DE 55%,

    #A2CDD8 60%,

    #C1E2DA 70%,

    #A3CEDB 75%,

    #E5F4FA 80%,

    #D5E5EC 85%,

    #D1D3E4 90%,

    #D3D7E9 95%,

    #D3D7E9 100%

  );

  transition: all .18s ease-in-out;

  &:before {

    content: "";

    display: block;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    opacity: 1;

    background: 

    conic-gradient(

      from var(--start-angle) at 50% 50%,

      $shimmer 0%,

      #FFFFFF00 5%,

      #FFFFFF00 20%,

      lighten($shimmer,8%) 25%,

      #FFFFFF00 30%,

      #FFFFFF00 40%,

      $shimmer 45%,

      #FFFFFF00 50%,

      #FFFFFF00 70%,

      lighten($shimmer,8%) 75%,

      #FFFFFF00 80%,

      #FFFFFF00 95%,

      $shimmer 100%

    );

    animation: rotateBack 0.33s ease-in-out forwards;

    transition: all .18s ease-in-out;

  }

  span {

    position: relative;

  }

  &:hover {

    cursor: pointer;

    box-shadow: 0 5px 10px darken(rgba(#7C7DBE,.33),10%), 0 10px 40px darken(rgba(#7C7DBE,.22),15%);

    &:before {

      opacity: .66;

      animation: rotateTo 0.33s ease-in-out forwards;

    }

  }

}