<div class="button-3">Hover</div>
<div class="button-3">Hover</div>
<div class="button-3">Hover</div>

@import url('https://fonts.googleapis.com/css?family=Lora:400i');

.button-3 {
	position   : relative;
	display    : inline-block;
	background : #099;
	margin     : 0 25px;
	padding    : 15px 50px;
	color      : #fff;
	font       : 400 italic 30px/30px 'Lora';
	cursor     : pointer;
	transition : all 0.3s;
	}

.button-3:hover {
	background : #fff;
	color      : #099;
}

.button-3::before,
.button-3::after {
	content      : '';
	position     : absolute;
	width        : 10px;
	height       : 10px;
	border-width : 0;
	border-style : solid;
	border-color : transparent;
	transition   : all 0.3s;
	}

.button-3::before {
	top                : -6px;
	right              : -6px;
	border-top-width   : 2px;
	border-right-width : 2px;
	border-color       : #099;
	}

.button-3::after {
	bottom              : -6px;
	left                : -6px;
	border-bottom-width : 2px;
	border-left-width   : 2px;
	border-color        : #099;
	}

.button-3:hover::before,
.button-3:hover::after {
	width  : 100%;
	height : 100%;
	}

<div class="button-2">
	<div class="button-2-text">Hover</div>
</div>
<div class="button-2">
	<div class="button-2-text">Hover</div>
</div>
<div class="button-2">
	<div class="button-2-text">Hover</div>
</div>

@import url('https://fonts.googleapis.com/css?family=Lora:400i');

.button-2 {
	overflow   : hidden;
	position   : relative;
	display    : inline-block;
	background : #099;
	margin     : 0 25px;
	padding    : 15px 50px;
	color      : #fff;
	font       : 400 italic 30px/30px 'Lora';
	cursor     : pointer;
	}

.button-2:hover {
	color : #099;
	}

.button-2-text {
	position : relative;
	z-index  : 1;
	}

.button-2::before {
	content    : '';
	position   : absolute;
	top        : 0;
	left       : 0;
	background : #fff;
	width      : 100%;
	height     : 100%;
	transform  : translateX(100%);
	transition : all 0.3s;
	box-shadow : 0 2px 0 #099 inset;
	}

.button-2:hover::before {
	transform : translateX(0%);
	}

<div class="button-1">
	<div class="button-1-text">Hover</div>
</div>
<div class="button-1">
	<div class="button-1-text">Hover</div>
</div>
<div class="button-1">
	<div class="button-1-text">Hover</div>
</div>

@import url('https://fonts.googleapis.com/css?family=Lora:400i');

.button-1 {
	overflow   : hidden;
	position   : relative;
	display    : inline-block;
	background : #fff;
	margin     : 0 25px;
	padding    : 15px 50px;
	color      : #fff;
	font       : 400 italic 30px/30px 'Lora';
	cursor     : pointer;
	box-shadow : 0 2px 0 #099 inset, 0 -2px 0 #099 inset;
	}

.button-1:hover {
	color : #099;
	}

.button-1-text {
	position : relative;
	z-index  : 1;
	}

.button-1::before,
.button-1::after {
	content    : '';
	position   : absolute;
	top        : 0;
	left       : 0;
	background : #099;
	width      : 100%;
	height     : 100%;
	transition : all 0.3s;
	}

.button-1::before {
	transform : translateY(-49%);
	}

.button-1::after {
	transform : translateY(49%);
	}

.button-1:hover::before {
	transform : translateY(-100%);
	}

.button-1:hover::after {
	transform : translateY(100%);
	}