.module-button{
  position: relative;
  margin: 20px auto;
  padding: 10px;
  text-transform: uppercase;
  text-decoration: none;
  overflow: hidden;
  border: 1px solid currentColor;
  z-index: 0;
}
[class^="btn-"]::before,[class^="btn-"]::after {
 transition: 0.5s;
  z-index: -1;
}

.btn-swipe {
  color: #9a3789;
}
.btn-swipe::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 100%;
  background: #520c46;
 
  
}
.btn-swipe:hover {
  color: #e1c4dc;
}
.btn-swipe:hover::before {
  width: 100%;
}
.btn-swipe:active {
  background: #881474;
}

.btn-diagonal-swipe {
  color: #be876e;
  display:block;
}
.btn-diagonal-swipe::after {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: #6b4432 transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 0;
  transition: 0.5s;
  z-index: -1;  
}
.btn-diagonal-swipe:hover {
  color: #ecdcd4;
}
.btn-diagonal-swipe:hover::after {
  border-width: 330px 330px 0 0;
  width:100%;
}
.btn-diagonal-swipe:active {
  background: #b27254;
}

.btn-double-swipe {
  color: #bc4b41;
}
.btn-double-swipe::before {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent transparent #6a1a13;
  position: absolute;
  bottom: 0;
  left: 0;
}
.btn-double-swipe::after {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent #6a1a13 transparent;
  position: absolute;
  right: 0;
  bottom: 0;
}
.btn-double-swipe:hover {
  color: #ebcac7;
}
.btn-double-swipe:hover::before {
  border-width: 206.25px 0 0 206.25px;
}
.btn-double-swipe:hover::after {
  border-width: 0 0 206.25px 206.25px;
}
.btn-double-swipe:active {
  background: #b02b20;
}

.btn-diagonal-close {
  color: #48a6b1;
}
.btn-diagonal-close::before {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent transparent #185a62;
  position: absolute;
  bottom: 0;
  left: 0;
}
.btn-diagonal-close::after {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent #185a62 transparent transparent;
  position: absolute;
  top: 0;
  right: 0;
}
.btn-diagonal-close:hover {
  color: #c9e5e8;
}
.btn-diagonal-close:hover::before {
  border-width: 165px 0 0 165px;
}
.btn-diagonal-close:hover::after {
  border-width: 0 165px 165px 0;
}
.btn-diagonal-close:active {
  background: #2896a3;
}

.btn-zoning-in {
  color: #ad96a0;
}
.btn-zoning-in::before {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent transparent #5f4f56;
  position: absolute;
  bottom: 0;
  left: 0;
}
.btn-zoning-in::after {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent #5f4f56 transparent transparent;
  position: absolute;
  top: 0;
  right: 0;
}
.btn-zoning-in span::before {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent #5f4f56 transparent;
  position: absolute;
  right: 0;
  bottom: 0;
}
.btn-zoning-in span::after {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: #5f4f56 transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 0;
}
.btn-zoning-in:hover {
  color: #e7e0e3;
}
.btn-zoning-in:hover::before {
  border-width: 165px 0 0 165px;
}
.btn-zoning-in:hover::after {
  border-width: 0 165px 165px 0;
}
.btn-zoning-in:hover span::before {
  border-width: 0 0 165px 165px;
}
.btn-zoning-in:hover span::after {
  border-width: 165px 165px 0 0;
}
.btn-zoning-in:active {
  background: #9e838f;
}

.btn-four-corners {
  color: #8d53b3;
}
.btn-four-corners::after {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent #492064 transparent transparent;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
.btn-four-corners::before {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent transparent #492064;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.btn-four-corners::before, .btn-four-corners::after {
  border-color: #492064;
}
.btn-four-corners span::after {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: #492064 transparent transparent transparent;
  position: absolute;
  top: 0;
  left: 0;
}
.btn-four-corners span::before {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent #492064 transparent;
  position: absolute;
  right: 0;
  bottom: 0;
}
.btn-four-corners span::before, .btn-four-corners span::after {
  border-color: #492064;
}
.btn-four-corners:hover {
  color: #decde9;
}
.btn-four-corners:hover::before {
  border-width: 20px 62.5px;
}
.btn-four-corners:hover::after {
  border-width: 20px 62.5px;
}
.btn-four-corners:hover span::before {
  border-width: 20px 62.5px;
}
.btn-four-corners:hover span::after {
  border-width: 20px 62.5px;
}
.btn-four-corners:active {
  background: #7935a6;
}

.btn-slice {
  color: #808695;
}
.btn-slice::after {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent #3f444e transparent transparent;
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
}
.btn-slice::before {
  content: '';
  width: 0;
  height: 0;
  -webkit-transform: rotate(360deg);
  border-style: solid;
  border-width: 0 0 0 0;
  border-color: transparent transparent transparent #3f444e;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: -1;
}
.btn-slice:hover {
  color: #dadce0;
}
.btn-slice:hover::before, .btn-slice:hover::after {
  border-width: 80px 262.5px;
}
.btn-slice:active {
  background: #697182;
}

.btn-position-ware {
  color: #80629f;
}
.btn-position-ware span {
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  border-radius: 50%;
  background: #402a55;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  -webkit-transition: width 0.4s, height 0.4s;
  transition: width 0.4s, height 0.4s;
  z-index: -1;
}
.btn-position-ware:hover {
  color: #dad1e3;
}
.btn-position-ware:hover span {
  width: 562.5px;
  height: 562.5px;
}
.btn-position-ware:active {
  background: #6a468e;
}

.btn-alternate {
  color: #27692b;
}
.btn-alternate::before, .btn-alternate::after,
.btn-alternate span::before,
.btn-alternate span::after {
  content: '';
  position: absolute;
  top: 0;
  width: 63.5px;
  height: 0;
  background: #012f04;
  z-index:-1;
}
.btn-alternate::before {
  left: 0;
}
.btn-alternate::after {
  left: 125px;
}
.btn-alternate span::before, .btn-alternate span::after {
  top: auto;
  bottom: 0;
}
.btn-alternate span::before {
  left: 62.5px;
}
.btn-alternate span::after {
  left: 187.5px;
}
.btn-alternate:hover {
  color: #c0d3c1;
}
.btn-alternate:hover::before, .btn-alternate:hover::after,
.btn-alternate:hover span::before,
.btn-alternate:hover span::after {
  height: 80px;
}
.btn-alternate:active {
  background: #014f06;
}

.btn-smoosh {
  color: #5177a7;
}
.btn-smoosh::before, .btn-smoosh::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 0;
  background: #1e395b;
  z-index: -1;
}
.btn-smoosh::after {
  top: auto;
  bottom: 0;
}
.btn-smoosh:hover {
  color: #ccd7e5;
}
.btn-smoosh:hover::before, .btn-smoosh:hover::after {
  height: 40px;
}
.btn-smoosh:active {
  background: #325f98;
}

.btn-vertical-overlap {
  color: #c93a8e;
}
.btn-vertical-overlap::before, .btn-vertical-overlap::after,
.btn-vertical-overlap span::before,
.btn-vertical-overlap span::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 250px;
  height: 0;
  background: rgba(115, 14, 73, 0.25);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  z-index: -1;
}
.btn-vertical-overlap::after,
.btn-vertical-overlap span::before {
  top: auto;
  bottom: 0;
}
.btn-vertical-overlap span::before,
.btn-vertical-overlap span::after {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.btn-vertical-overlap:hover {
  color: #efc5de;
}
.btn-vertical-overlap:hover::before, .btn-vertical-overlap:hover::after,
.btn-vertical-overlap:hover span::before,
.btn-vertical-overlap:hover span::after {
  height: 80px;
}
.btn-vertical-overlap:active {
  background: #c0177a;
}

.btn-horizontal-overlap {
  color: #8f5c82;
}
.btn-horizontal-overlap::before, .btn-horizontal-overlap::after,
.btn-horizontal-overlap span::before,
.btn-horizontal-overlap span::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 80px;
  background: rgba(74, 38, 65, 0.25);
  -webkit-transition: 0.4s;
  transition: 0.4s;
  z-index: -1;
}
.btn-horizontal-overlap::after,
.btn-horizontal-overlap span::before {
  left: auto;
  right: 0;
}
.btn-horizontal-overlap span::before,
.btn-horizontal-overlap span::after {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s;
}
.btn-horizontal-overlap:hover {
  color: #decfda;
}
.btn-horizontal-overlap:hover::before, .btn-horizontal-overlap:hover::after,
.btn-horizontal-overlap:hover span::before,
.btn-horizontal-overlap:hover span::after {
  width: 250px;
}
.btn-horizontal-overlap:active {
  background: #7b3f6c;
}

@-webkit-keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}

@keyframes criss-cross-left {
  0% {
    left: -20px;
  }
  50% {
    left: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    left: 50%;
    width: 375px;
    height: 375px;
  }
}
@-webkit-keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}
@keyframes criss-cross-right {
  0% {
    right: -20px;
  }
  50% {
    right: 50%;
    width: 20px;
    height: 20px;
  }
  100% {
    right: 50%;
    width: 375px;
    height: 375px;
  }
}
.btn-collision {
  position: relative;
  color: #9a7cba;
}
.btn-collision::before, .btn-collision::after {
  position: absolute;
  top: 50%;
  content: '';
  width: 20px;
  height: 20px;
  background: #8865ae;
  border-radius: 50%;
  z-index: -1;
}
.btn-collision::before {
  left: -20px;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  /*     animation: criss-cross-left 0.8s reverse; */
}
.btn-collision::after {
  right: -20px;

  -webkit-transform: translate(50%, -50%);
          transform: translate(50%, -50%);
  /*     animation: criss-cross-right 0.8s reverse; */
}
.btn-collision:hover::before, .btn-collision:hover::after {
  /*       @include size($btn-width); */
}
.btn-collision:hover::before {
  -webkit-animation: criss-cross-left 0.8s both;
          animation: criss-cross-left 0.8s both;
}
.btn-collision:hover::after {
  -webkit-animation: criss-cross-right 0.8s both;
          animation: criss-cross-right 0.8s both;
}