<div class="container">

  <a class="btn" href="#">

    <span class="btnInner">Button</span>

  </a>

</div>

$green: #58DD93;

​

:root {

  --size-default: 22px;

  --size-sm: 16px;

  --color-green: #{$green};

  --color-black: #000;

}

​

@property --angle {

  syntax: "<angle>";

  initial-value: 0deg;

  inherits: false;

}

​

@property --glowColor {

  syntax: "<color>";

  initial-value: #58DD93;

}

​

@keyframes rotate {

  0% { --angle: 0deg; --glowColor: var(--color-green);}

  100% { --angle: 360deg; --glowColor: var(--color-green);}

}

​

* {

  box-sizing: border-box;

}

​

html, body {

  width: 100%;

  height: 100%;

  background: #000;

  background: 

      linear-gradient(

        to bottom,

        rgba(0,0,0,0) 0%,

        var(--color-black) 100%

      ),

      radial-gradient(

        circle at 50% -50%,

        #335F4B 0%,

        var(--color-black) 100%

      );

  font-family: monospace;

  font-size: 20px;

}

​

.container {

  display: flex;

  width: 100%;

  height: 100%;

  align-items: center;

  justify-content: center;

  padding: 16px;

}

​

.btn {

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 100px;

  border: none;

  background: none;

  position: relative;

  padding: 1px;

  text-decoration: none;

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

  transform: translate3d(0,0,0);

​

  &:after, &:before {

    content: "";

    display: block;

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    border-radius: calc(100px + 1.5px);

    background-size: 100% 100%;

    background-position: 0px 0px;

    background-image: conic-gradient(

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

      rgba(0,0,0,0) 0%,

      rgba(0,0,0,0) 33%,

      var(--glowColor) 50%,

      rgba(0,0,0,0) 66%,

      rgba(0,0,0,0) 100%);

    animation: rotate 2s infinite linear;

  }

  &:before {

    animation: rotate 2s infinite linear;

    filter: blur(20px);

  }

​

  .btnInner {

    position: relative;

    display: flex;

    flex-direction: column;

    width: 100%;

    padding: var(--size-sm) var(--size-default);

    border-radius: 100px;

    color: var(--color-green);

    font-weight: 500;

    font-size: 22px;

    z-index: 1;

    transition: all .18s ease;

    background: rgba(#000,.3);

    backdrop-filter: blur(40px);

    backface-visibility: hidden;

  }

  &:hover {

    .btnInner  {

      background: rgba($green,.1);

      color: lighten($green,20%);  

    }

  }

  &:active {

    transform: scale(0.95);

  }

}

​