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

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

//color/ui color variables
$white: #ececec;
$black: #333333;
$yellow: #ffff00;
$purple: #8a19ff;
$colorPrimary: $yellow;
$colorSecondary: $purple;

//split button mixin
@mixin btn__split($colorLeft, $colorRight, $textColor) {
  .btn {
    position: relative;
    letter-spacing: 0.25em;
    margin: 0 auto;
    padding: 1rem 2.5rem;
    background: transparent;
    outline: none;
    font-size: 28px;
    color: $textColor;

    &::after,
    &::before {
      content: "";
      position: absolute;
      height: 100%;
      width: 50%;
      transform: skewX(30deg);
      transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
      z-index: -2;
    }
    &::before {
      background-color: $colorLeft;
      top: -1rem;
      left: 0rem;
    }
    &::after {
      background-color: $colorRight;
      top: 1rem;
      left: 8rem;
    }
    &:hover {
      &::before,
      &::after {
        top: 0;
        transform: skewx(0deg);
      }
      &::after {
        left: 0rem;
      }
      &::before {
        left: 8.75rem;
      }
    }
  }
}

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;
}

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