Shadow color chane

by Sasá Rafalsky

HTML

<div class="createButton">CREATE POST</div>

SCSS

html,
body {
  margin: 0 auto;
  height: 100%;
}

body {
  display: flex;
  align-items: center;
  font-family: monospace;
  justify-content: center;
  background-color: #fff;
}

@mixin backlight($x, $y, $spread, $size, $colorA, $colorB, $duration) {
  &:after {
    position: absolute;
    content: "";
    top: $y;
    left: $x;
    right: 0;
    z-index: -1;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    transform: scale($size);
    filter: blur($spread);
    background: linear-gradient(270deg, $colorA, $colorB);
    background-size: 200% 200%;
    animation: animateGlow $duration ease infinite;

    @keyframes animateGlow {
      0% {
        background-position: 0% 50%
      }

      50% {
        background-position: 100% 50%
      }

      100% {
        background-position: 0% 50%
      }
    }
  }
}

@keyframes textColor {
  0% {
    color: #7e0fff;
  }

  50% {
    color: #0fffc1;
  }

  100% {
    color: #7e0fff;
  }
}


.createButton {
  border-radius: 12px;
  position: relative;
  width: 240px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  background-color: #fff;
  animation: textColor 10s ease infinite;
  @include backlight(0, 10px, 30px, 0.95, #0fffc1, #7e0fff, 10s);
}