button1.css

//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 {
		//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;
}
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 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);