Button hover

button-hover.markdown

Button hover

Asset demo for a Blocklevel project

A Pen by Tim Rijkse on CodePen.

License.

index.html

<button class="skew-button"><span>Challenge instructions</span></button>

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.4/TweenMax.min.js"></script>
<script src="http://dev.hoasting.net/_tim-codepen/gsap/utils/Draggable.min.js"></script>
<script src="//s3-us-west-2.amazonaws.com/s.cdpn.io/16327/MorphSVGPlugin.min.js?r=132"></script>

style.scss

@import 'https://fonts.googleapis.com/css?family=Anton';

* {
	box-sizing: border-box;
}

html {
	font-size: 62.5%;	
}

body {
	height: 100vh;
	background-color: #071432;
}

// For demo purposes
.skew-button {
	position: absolute;
	left: 50%;
	top: 50%;
}

// Skew button
// ==========================================================================
.skew-button {
	cursor: pointer;
	outline: none;
	transform: translate3d(-50%, -50%, 0);
	backface-visibility: hidden;
	position: relative;
	display: inline-block;
	padding: 0;
	background-color: transparent;
	border: none;
	font: 1.3rem 'Anton', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: #fff;
	
	// Text
	span {
		transform: translate3d(0, 0, 0);
		backface-visibility: hidden;
		position: relative;
		display: block;
		width: 100%;
		height: 100%;
		padding: 20px 50px;
		z-index: 3;
	}
	
	// Border
	&:before,
	span:before {
		content: '';
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) skewX(-20deg);
		width: 100%;
		height: 50px;
		border: 1px solid #0e3876;
		z-index: 2;
	}
	
	span:before {
		display: block;
		transform: translate(-50%, -50%) skew(-20deg);
		transform-origin: center center;
		z-indeX: -1;
	}
	
	// Fill
	&:after {
		transition: all 100ms ease-out;
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		transform: skewX(-20deg) scaleX(0);
		width: 100%;
		height: 100%;
		background-color: #0e3876;
		border: 1px solid transparent;
		z-index: 1;
	}
	
	// Hover
	&:hover {
		span:before {
			animation: fill .5s ease-out;
			animation-fill-mode: forwards;
		}
		
		&:after {
			animation: swoosh .7s ease-in;
		}
	}
	
	// Active
	&:active {
		&:before {
			background-color: darken(#0e3876, 20%);
		}
	}
}

// Animation
// ==========================================================================
@keyframes swoosh {
	0% {
		transform-origin: left center;
	}
	
	20% {
		transform: skewX(-20deg) scaleX(1);
		transform-origin: left center;
	}
	
	21% {
		transform-origin: right center;
	}
	
	50% {
		transform: skewX(-20deg) scaleX(0);
		transform-origin: right center;
	}
}

@keyframes fill {
	0% {
		background-color: rgba(#0e3876, 0);
	}
	
	20% {
		opacity: .5;
		border-width: 15px;
		border-color: darken(#0e3876, 10%);
	}
	
	100% {
		opacity: .5;
		border-width: 1px;
		background-color: rgba(#0e3876, 0.5);
	}
}