Button Explore

button-explore.markdown

Button Explore

Just a kind of experimental button transition.

A Pen by Nicolas Lanthemann on CodePen.

License.

index.pug

button.explore Explore
	span.icon-right
	span.icon-right.after
	
a(class='signature', href='http://vanderlanth.io' target='_blank') Made with ♥ by vanderlanth

style.scss

// this code is such a mess right now ! If you look at it, your eyes will bleed.


@import 'https://fonts.googleapis.com/css?family=Space+Mono';

html, body {
	width: 100vw;
	height: 100vh;
	background: black;
	display: flex;
	flex-flow: row wrap;
	justify-content: center;
	align-items: center;
	overflow:hidden;
}

button {
	font-family: 'Space Mono', monospace;
	letter-spacing: 1px;
	background: none;
	color: white;
	position: relative;
	outline: none;
	border: none;
	height: 50px;
	width: 190px;
	font-size: 14px;
	z-index: 2;
	transition: .01s .23s ease-out all;
	overflow: hidden;
	&:before {
		content: '';
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 55%;
		background: #202020;
		z-index: -1;
		transition: .3s ease-in all;
	}
	&:after {
		content: '';
		position: absolute;
		left: -5%;
		top: 5%;
		height: 90%;
		width: 5%;
		background: white;
		z-index: -1;
		transition: .4s .02s ease-in all;
	}
	&:hover {
		cursor: pointer;
		color: transparent;
		&:before {
			left: 100%;
			width: 25%;
		}
		&:after {
			left: 100%;
			width: 70%;
		}
		.icon-right.after:after {
			left: -80px;
			color: white;
			transition: .2s .2s ease all;
		}
		.icon-right.after:before {
			left: -104px;
    	top: 14px;
			opacity: 0.2;
			color: white;
		}
	}
}

.icon-right {
	position: absolute;
	top: 0;
	right: 0;
	&:after {
		font-family: "FontAwesome";
		content: '\2192';
		font-size: 24px;
		display: inline-block;
		position: relative;
		top: 26px;
		transform: translate3D(0, -50%, 0);
	}
	&.after:after {
		left: -250px;
		color: black;
		transition: .15s .25s ease left, .5s .05s ease color;
	}
	&.after:before {
		content: 'Explore';
		position: absolute;
		left: -230px;
		top: 14px;
		opacity: 0;
		transition: .2s ease-in all;
	}
}


.signature {
	position: fixed;
  font-family:  sans-serif;
	font-weight: 100;
	bottom: 10px;
	left: 0;
	letter-spacing: 4px;
	font-size: 10px;
	width: 100vw;
  text-align: center;
  color: white;
	text-transform: uppercase;
  text-decoration: none;
}