styles.scss

.btn-11 {
  position: relative;
  $btn-color: rgb(41, 221, 137);
  $btn-color-dark: shade($btn-color, 40%);
  color: tint($btn-color);
  border: 4px solid black;

  &:before,
  &:after {
    // @include absolute(50%);
    content: "";
    // @include size(20px);
    background-color: $btn-color;
    border-radius: 50%;
  }

  &:before {
    left: -20px;
    transform: translate(-50%, -50%);
    animation: criss-cross-left 0.8s reverse;
  }

  &:after {
    right: -20px;
    transform: translate(50%, -50%);
    animation: criss-cross-right 0.8s reverse;
  }

  &:hover {
    color: tint($btn-color, 75%);

    &:before,
    &:after {
    }

    &:before {
      animation: criss-cross-left 0.8s both;
      animation-direction: alternate;
    }

    &:after {
      animation: criss-cross-right 0.8s both;
      animation-direction: alternate;
    }
  }
}