CSS-Collections-Buttons-3

Preview

hover me

Code

//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) {
  .btn-hover1 {
    //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 {
      content: "";
      position: absolute;
      height: 40%;
      width: 10%;
      transition: all 0.5s $cubic-bezier;
      z-index: -2;
      border-radius: 50%;
      //animation: grow 1s infinite;
    }
    &::before {
      background-color: $backgroundColor;
      top: -0.75rem;
      left: 0.5rem;
      animation: top 2s $cubic-bezier 0.25s infinite alternate;
    }
    &::after {
      background-color: $foregroundColor;
      top: 3rem;
      left: 13rem;
      animation: bottom 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;
}

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

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

See the Pen UI Button Hover Effect #2 by dreambo8563 (@dreambo8563) on CodePen.