Button Hover Effect

button-hover-effect.markdown

Button Hover Effect

Hover effect using pseudo elements

A Pen by Daniel Gonzalez on CodePen.

License.

index.pug

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

style.scss

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