Cutaway Indicator

This code snippet was published on Wednesday, December 4^th, 2013.

Sorry, this code snippet failed to load, but you can still check it out over on CodePen!

<button>Hover Me</button>

html,
body {
	height: 100%;
	position: relative;
}
body {
	background-color: rebeccapurple;
	background-image: linear-gradient(transparent 0%, coral 100%);
	font: 400 normal 24px/2em sans-serif;
}
button {
	background-color: gray;
	color: white;
	display: block;
	overflow: visible;
	padding: 1em 2em 1em 1em;
	border: 0;
	position: absolute;
	top: 50%;
	left: 50%;
	text-decoration: none;
	font-weight: 600;
	transform: translate3d(-50%, -50%, 0);
	&:before,
	&:after {
		content: "";
		width: 0;
		height: 0;
		border-right: 2.5em solid gray;
		position: absolute;
		right: 100%;
		transition: all .5s;
	}
	&:before {
		border-bottom: 3em solid transparent;
		top: 0;
	}
	&:hover:before,
	&:focus:before {
		border-right-color: rgba(green, .6);
	}
	&:after {
		border-top: 3em solid transparent;
		bottom: 0;
	}
	&:hover:after,
	&:focus:after {
		border-right-color: rgba(orange, .6);
	}
}