<header>
	<h1>Button Hover animation</h1>
</header>

<main class='container'>
	<button class='myButt one'>
		<div class='insider'></div>
		Hover over me
	</button>
</main>
<main class='container'>
	<button class='myButt two'>
		Hover over me
	</button>
</main>
<main class='container'>
	<button class='myButt three'>
		Hover over me
	</button>
</main>
<main class='container'>
	<button class='myButt four'>
	<div class='icon'>&#x2605;</div>
		<span>Hover over me</span>
	</button>
</main>

<main class='container'>
	<button class='myButt five'>
	<div class='layer'>YEAH</div>
		Hover over me
	</button>
</main>

$red:#F44336;
@mixin transition($in) {
	transition:$in;
	-webkit-transition:$in;
	-moz-transition:$in;
	-o-transition:$in;
	-ms-transition:$in;
}
@mixin transform($in) {
	transform:$in;
	-webkit-transform:$in;
	-moz-transform:$in;
	-o-transform:$in;
	-ms-transform:$in;
}
@mixin animation($in) {
	animation:$in;
	-webkit-animation:$in;
	-moz-animation:$in;
	-o-animation:$in;
	-ms-animation:$in;
}

body {
	margin:0;
	padding:0;
	background-color:#222;
}
* {
	font-family:Helvetica,sans-serif;
	color:$red;
}

header {
	text-align:center;

	h1 {
		text-transform:uppercase;
	}
}

.myButt {
	outline:none;
	border:none;
	padding:20px;
	display:block;
	margin:50px auto;
	cursor:pointer;
	font-size:20px;
	background-color:transparent;
	position:relative;
	border:2px solid #fff;

	@include transition(all 0.5s ease);
}


// ################ ONE

.one {
	border-color:#fff;
	overflow:hidden;
	color:#fff;

	.insider {
		background-color:#fff;
		width:100%;
		height:20px;
		position:absolute;
		left:-135px;

		@include transform(rotateZ(45deg));
	}

	&:hover {
		background-color:$red;
		border-color:#fff;
		color:#fff;

		.insider {
			@include transition(all 0.3s ease);
			left:135px;
		}
	}
}

// ################ TWO

.two {
	color:#fff;

	&:hover {
		border-color:$red;
		color:$red;

		@include animation(shakeThatBooty 0.3s linear 1);		
	}
}

@keyframes shakeThatBooty {
	33% {
		@include transform(rotateZ(10deg));
	}
	67% {
		@include transform(rotateZ(-10deg));
	}
	100% {
		@include transform(rotateZ(10deg));
	}
}


// ################ THREE

.three {
	color:#fff;
	border-color:transparent;

	&:before {
		width:0;
		height:3px;
		content:" ";
		background-color:$red;
		position:absolute;
		top:0;
		left:50%;

		@include transition(all 0.3s ease);
	}

	&:after {
		@extend .three:before;
		top:100%;
	}

	&:hover {
		letter-spacing:8px;
		color:$red;

		&:before {
			width:100%;
			left:0;
		}
		&:after {
			width:100%;
			left:0;
		}
	}
}

// ################ FOUR

.four {
	overflow:hidden;
	
	span {
		color:#fff;
		display:inline-block;
		
		@include transition(all 0.3s ease);

	}

	.icon {
		position:absolute;
		left:-60px;
		top:0;
		color:#fff;
		padding:20px;
		background-color:$red;
		@include transition(all 0.3s ease);
	}

	&:hover {
		.icon {
			left:0px;
		}
		span {
			color:$red;
			margin-left:50px;
		}
	}
}

// ################ FIVE

.five {
	overflow:hidden;
	color:#fff;

	.layer {
		color:#fff;
		position:absolute;
		top:-70px;
		width:100%;
		left:0;
		padding:20px 0;
		background-color:$red;
		@include transition(all 0.3s ease);
	}

	&:hover {
		.layer {
			top:0;
		}
	}
}

/*
Pure CSS
*/