.container
  button.btn(href="#") hover me

//Lato font
@import url("https://fonts.googleapis.com/css?family=Lato:400,700");

//color/ui color variables
$white: #ececec;
$black: #111111;
$red1: #e74c3c;
$red2: #c92918;
$colorPrimary: $red1;
$colorSecondary: $red2;
$cubic-bezier: cubic-bezier(0.68, -0.55, 0.265, 1.55);

//split button mixin
@mixin btn__split($foregroundColor, $backgroundColor, $textColor) {
  button.btn {
    text-transform: uppercase;
    text-decoration: none;
    font-weight: 700;
    border: 0;
    //display: block;
    position: relative;
    letter-spacing: 0.15em;
    margin: 0 auto;
    padding: 1rem 2.5rem;
    background: transparent;
    outline: none;
    font-size: 28px;
    color: $textColor;
    transition: all 0.5s $cubic-bezier 0.15s;
    &::after,
    &::before {
      border: 0;
      content: "";
      position: absolute;
      height: 40%;
      width: 10%;
      transition: all 0.5s $cubic-bezier;
      z-index: -2;
      border-radius: 50%;
      //animation: grow 1s infinite;
    }
    &::before {
      border: 0;
      background-color: $backgroundColor;
      top: -0.75rem;
      left: 0.5rem;
      animation: topAnimation 2s $cubic-bezier 0.25s infinite alternate;
    }
    &::after {
      background-color: $foregroundColor;
      top: 3rem;
      left: 13rem;
      animation: bottomAnimation 2s $cubic-bezier 0.5s infinite alternate;
    }
    &:hover {
      color: white;
      &::before,
      &::after {
        top: 0;
        //transform: skewx(-10deg);
        height: 100%;
        width: 100%;
        border-radius: 0;
        animation: none;
      }
      &::after {
        left: 0rem;
      }
      &::before {
        top: 0.5rem;
        left: 0.35rem;
      }
    }
  }
}

* {
  box-sizing: border-box;
}
body,
html {
  height: 100%;
}

body {
  font-family: "Lato", sans-serif;
  color: $black;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}

.container {
  width: auto;
  margin: auto;
}
// a {
//  text-transform: uppercase;
//  text-decoration: none;
//  font-weight: 700;
// }
@keyframes topAnimation {
  from {
    transform: translate(0rem, 0);
  }
  to {
    transform: translate(0rem, 3.5rem);
  }
}
@keyframes bottomAnimation {
  from {
    transform: translate(-11.5rem, 0);
  }
  to {
    transform: translate(0rem, 0);
  }
}

@include btn__split($colorPrimary, $colorSecondary, $black);