/*
	There might be some redundant code but that is
	only to make each effect self-contained!
*/

/*
	FIRST EFFECT
*/

.aButton1 {
	outline: none;
	border: 3px solid rgba(51,102,153,1);
	background-color: transparent;
	padding: 12px 25px;
	position: relative;
	overflow: hidden;
}

.aButton1 .buttonBack {
	position: absolute;
	width: 105%; /* To tackle some bug in Chrome */
	height: 100%;
	background-color: rgba(51,102,153,1);
	top: 0px;
	left: -105%;
	-webkit-transition: left 0.3s;
	-moz-transition: left 0.3s;
	transition: left 0.3s;
}

.aButton1:hover .buttonBack {
	left: 0px;
}

.aButton1 .buttonFront {
	position: relative;
	width: 100%;
	z-index: 10;
	color: rgba(51,102,152,1);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.aButton1:hover .buttonFront {
	color: white;
}

/*
	SECOND EFFECT
*/

.aButton2 {
	outline: none;
	border: 3px solid rgba(51,102,153,1);
	background-color: transparent;
	padding: 12px 25px;
	position: relative;
	overflow: hidden;
}

.aButton2 .buttonBack {
	position: absolute;
	width: 105%; /* To tackle some bug in Chrome */
	height: 100%;
	background-color: rgba(51,102,153,1);
	top: 0px;
	left: 105%;
	-webkit-transition: left 0.3s;
	-moz-transition: left 0.3s;
	transition: left 0.3s;
}

.aButton2:hover .buttonBack {
	left: 0px;
}

.aButton2 .buttonFront {
	position: relative;
	width: 100%;
	z-index: 10;
	color: rgba(51,102,152,1);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.aButton2:hover .buttonFront {
	color: white;
}

/*
	THIRD EFFECT
*/

.aButton3 {
	outline: none;
	border: 3px solid rgba(51,102,153,1);
	background-color: transparent;
	padding: 12px 25px;
	position: relative;
	overflow: hidden;
}

.aButton3 .buttonBack {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(51,102,153,1);
	top: -100%;
	left: 0px;
	-webkit-transition: top 0.3s;
	-moz-transition: top 0.3s;
	transition: top 0.3s;
}

.aButton3:hover .buttonBack {
	top: 0px;
}

.aButton3 .buttonFront {
	position: relative;
	width: 100%;
	z-index: 10;
	color: rgba(51,102,152,1);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.aButton3:hover .buttonFront {
	color: white;
}

/*
	FOURTH EFFECT
*/

.aButton4 {
	outline: none;
	border: 3px solid rgba(51,102,153,1);
	background-color: transparent;
	padding: 12px 25px;
	position: relative;
	overflow: hidden;
}

.aButton4 .buttonBack {
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: rgba(51,102,153,1);
	top: 100%;
	left: 0px;
	-webkit-transition: top 0.3s;
	-moz-transition: top 0.3s;
	transition: top 0.3s;
}

.aButton4:hover .buttonBack {
	top: 0px;
}

.aButton4 .buttonFront {
	position: relative;
	width: 100%;
	z-index: 10;
	color: rgba(51,102,152,1);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.aButton4:hover .buttonFront {
	color: white;
}

/*
	FIFTH EFFECT
*/

.aButton5 {
	outline: none;
	border: 3px solid rgba(51,102,153,1);
	background-color: transparent;
	padding: 12px 25px;
	position: relative;
	overflow: hidden;
}

.aButton5 .buttonBack1 {
	position: absolute;
	width: 51%;
	height: 100%;
	background-color: rgba(51,102,153,1);
	top: 0px;
	left: -51%;
	-webkit-transition: left 0.3s;
	-moz-transition: left 0.3s;
	transition: left 0.3s;
}

.aButton5:hover .buttonBack1 {
	left: 0px;
}

.aButton5 .buttonBack2 {
	position: absolute;
	width: 50%;
	height: 100%;
	background-color: rgba(51,102,153,1);
	top: 0px;
	left: 100%;
	-webkit-transition: left 0.3s;
	-moz-transition: left 0.3s;
	transition: left 0.3s;
}

.aButton5:hover .buttonBack2 {
	left: 50%;
}

.aButton5 .buttonFront {
	position: relative;
	width: 100%;
	z-index: 10;
	color: rgba(51,102,152,1);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.aButton5:hover .buttonFront {
	color: white;
}

/*
	SIXTH EFFECT
*/

.aButton6 {
	outline: none;
	border: 3px solid rgba(51,102,153,1);
	background-color: transparent;
	padding: 12px 25px;
	position: relative;
	overflow: hidden;
}

.aButton6 .buttonBack1 {
	position: absolute;
	width: 100%;
	height: 50%;
	background-color: rgba(51,102,153,1);
	top: -50%;
	left: 0px;
	-webkit-transition: top 0.3s;
	-moz-transition: top 0.3s;
	transition: top 0.3s;
}

.aButton6:hover .buttonBack1 {
	top: 0px;
}

.aButton6 .buttonBack2 {
	position: absolute;
	width: 100%;
	height: 50%;
	background-color: rgba(51,102,153,1);
	top: 100%;
	left: 0px;
	-webkit-transition: top 0.3s;
	-moz-transition: top 0.3s;
	transition: top 0.3s;
}

.aButton6:hover .buttonBack2 {
	top: 50%;
}

.aButton6 .buttonFront {
	position: relative;
	width: 100%;
	z-index: 10;
	color: rgba(51,102,152,1);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.aButton6:hover .buttonFront {
	color: white;
}

/*
	SEVENTH EFFECT
*/

.aButton7 {
	outline: none;
	border: 3px solid rgba(51,102,153,1);
	background-color: transparent;
	padding: 12px 25px;
	position: relative;
	overflow: hidden;
}

.aButton7 .buttonBack1 {
	position: absolute;
	width: 0px;
	height: 100%;
	background-color: rgba(51,102,153,1);
	top: 0px;
	left: 50%;
	-webkit-transition: left 0.3s, width 0.3s;
	-moz-transition: left 0.3s, width 0.3s;
	transition: left 0.3s, width 0.3s;
}

.aButton7:hover .buttonBack1 {
	left: 0px;
	width: 50%;
}

.aButton7 .buttonBack2 {
	position: absolute;
	width: 0px;
	height: 100%;
	background-color: rgba(51,102,153,1);
	top: 0px;
	left: 50%;
	-webkit-transition: width 0.3s;
	-moz-transition: width 0.3s;
	transition: width 0.3s;
}

.aButton7:hover .buttonBack2 {
	width: 50%;
}

.aButton7 .buttonFront {
	position: relative;
	width: 100%;
	z-index: 10;
	color: rgba(51,102,152,1);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.aButton7:hover .buttonFront {
	color: white;
}

/*
	EIGHTH EFFECT
*/

.aButton8 {
	outline: none;
	border: 3px solid rgba(51,102,153,1);
	background-color: transparent;
	padding: 12px 25px;
	position: relative;
	overflow: hidden;
}

.aButton8 .buttonBack1 {
	position: absolute;
	width: 100%;
	height: 0px;
	background-color: rgba(51,102,153,1);
	top: 51%;
	left: 0px;
	-webkit-transition: top 0.3s, height 0.3s;
	-moz-transition: top 0.3s, height 0.3s;
	transition: top 0.3s, height 0.3s;
}

.aButton8:hover .buttonBack1 {
	top: 0px;
	height: 51%;
}

.aButton8 .buttonBack2 {
	position: absolute;
	width: 100%;
	height: 0px;
	background-color: rgba(51,102,153,1);
	top: 50%;
	left: 0px;
	-webkit-transition: height 0.3s;
	-moz-transition: height 0.3s;
	transition: height 0.3s;
}

.aButton8:hover .buttonBack2 {
	height: 50%;
}

.aButton8 .buttonFront {
	position: relative;
	width: 100%;
	z-index: 10;
	color: rgba(51,102,152,1);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

.aButton8:hover .buttonFront {
	color: white;
}

/*
	NINTH EFFECT
*/

.aButton9 {
	outline: none;
	border: none;
	background-color: #e3e3e3;
	padding: 14px 27px;
	position: relative;
	overflow: hidden;
}

.aButton9 .buttonBack {
	position: absolute;
	width: 105%;
	height: 4px;
	background-color: rgba(51,102,153,1);
	bottom: 0px;
	left: -105%;
	-webkit-transition: left 0.3s;
	-moz-transition: left 0.3s;
	transition: left 0.3s;
}

.aButton9:hover .buttonBack {
	left: 0px;
}

.aButton9 .buttonFront {
	position: relative;
	width: 100%;
	z-index: 10;
	color: rgba(51,102,152,1);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

/*
	TENTH EFFECT
*/

.aButton10 {
	outline: none;
	border: none;
	background-color: #e3e3e3;
	padding: 14px 27px;
	position: relative;
	overflow: hidden;
}

.aButton10 .buttonBack {
	position: absolute;
	width: 105%;
	height: 4px;
	background-color: rgba(51,102,153,1);
	bottom: 0px;
	left: 105%;
	-webkit-transition: left 0.3s;
	-moz-transition: left 0.3s;
	transition: left 0.3s;
}

.aButton10:hover .buttonBack {
	left: 0px;
}

.aButton10 .buttonFront {
	position: relative;
	width: 100%;
	z-index: 10;
	color: rgba(51,102,152,1);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

/*
	ELEVENTH EFFECT
*/

.aButton11 {
	outline: none;
	border: none;
	background-color: #e3e3e3;
	padding: 14px 27px;
	position: relative;
	overflow: hidden;
}

.aButton11 .buttonBottom, .aButton11 .buttonTop {
	position: absolute;
	width: 105%;
	height: 4px;
	background-color: rgba(51,102,153,1);
	-webkit-transition: left 0.3s;
	-moz-transition: left 0.3s;
	transition: left 0.3s;
}

.aButton11:hover .buttonBottom, .aButton11:hover .buttonTop {
	left: 0px;
}

.aButton11 .buttonBottom {
	bottom: 0px;
	left: -105%;
}

.aButton11 .buttonTop {
	top: 0px;
	left: 105%;
}

.aButton11 .buttonFront {
	position: relative;
	width: 100%;
	z-index: 10;
	color: rgba(51,102,152,1);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

/*
	TWELFTH EFFECT
*/

.aButton12 {
	outline: none;
	border: none;
	background-color: #e3e3e3;
	padding: 14px 27px;
	position: relative;
	overflow: hidden;
}

.aButton12 .buttonBottom, .aButton12 .buttonTop {
	position: absolute;
	width: 105%;
	height: 4px;
	background-color: rgba(51,102,153,1);
	-webkit-transition: left 0.3s;
	-moz-transition: left 0.3s;
	transition: left 0.3s;
}

.aButton12:hover .buttonBottom, .aButton12:hover .buttonTop {
	left: 0px;
}

.aButton12 .buttonBottom {
	bottom: 0px;
	left: 105%;
}

.aButton12 .buttonTop {
	top: 0px;
	left: -105%;
}

.aButton12 .buttonFront {
	position: relative;
	width: 100%;
	z-index: 10;
	color: rgba(51,102,152,1);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

/*
	THIRTEENTH EFFECT
*/

.aButton13 {
	outline: none;
	border: none;
	background-color: #e3e3e3;
	padding: 14px 27px;
	position: relative;
	overflow: hidden;
}

.aButton13 .buttonLeft, .aButton13 .buttonRight {
	position: absolute;
	width: 4px;
	height: 105%;
	background-color: rgba(51,102,153,1);
	-webkit-transition: top 0.3s;
	-moz-transition: top 0.3s;
	transition: top 0.3s;
}

.aButton13:hover .buttonLeft, .aButton13:hover .buttonRight {
	top: 0px;
}

.aButton13 .buttonLeft {
	left: 0px;
	top: -105%;
}

.aButton13 .buttonRight {
	right: 0px;
	top: 105%;
}

.aButton13 .buttonFront {
	position: relative;
	width: 100%;
	z-index: 10;
	color: rgba(51,102,152,1);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

/*
	FOURTEENTH EFFECT
*/

.aButton14 {
	outline: none;
	border: none;
	background-color: #e3e3e3;
	padding: 14px 27px;
	position: relative;
	overflow: hidden;
}

.aButton14 .buttonLeft, .aButton14 .buttonRight {
	position: absolute;
	width: 4px;
	height: 105%;
	background-color: rgba(51,102,153,1);
	-webkit-transition: top 0.3s;
	-moz-transition: top 0.3s;
	transition: top 0.3s;
}

.aButton14:hover .buttonLeft, .aButton14:hover .buttonRight {
	top: 0px;
}

.aButton14 .buttonLeft {
	left: 0px;
	top: 105%;
}

.aButton14 .buttonRight {
	right: 0px;
	top: -105%;
}

.aButton14 .buttonFront {
	position: relative;
	width: 100%;
	z-index: 10;
	color: rgba(51,102,152,1);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

/*
	FIFTEENTH EFFECT
*/

.aButton15 {
	outline: none;
	border: none;
	background-color: #e3e3e3;
	padding: 14px 27px;
	position: relative;
	overflow: hidden;
}

.aButton15 .buttonLeft, .aButton15 .buttonRight {
	position: absolute;
	width: 4px;
	height: 105%;
	background-color: rgba(51,102,153,1);
	-webkit-transition: top 0.3s;
	-moz-transition: top 0.3s;
	transition: top 0.3s;
}

.aButton15:hover .buttonLeft, .aButton15:hover .buttonRight {
	top: 0px;
}

.aButton15 .buttonLeft {
	left: 0px;
	top: 105%;
}

.aButton15 .buttonRight {
	right: 0px;
	top: -105%;
}

.aButton15 .buttonBottom, .aButton15 .buttonTop {
	position: absolute;
	width: 105%;
	height: 4px;
	background-color: rgba(51,102,153,1);
	-webkit-transition: left 0.3s;
	-moz-transition: left 0.3s;
	transition: left 0.3s;
}

.aButton15:hover .buttonBottom, .aButton15:hover .buttonTop {
	left: 0px;
}

.aButton15 .buttonBottom {
	bottom: 0px;
	left: 105%;
}

.aButton15 .buttonTop {
	top: 0px;
	left: -105%;
}

.aButton15 .buttonFront {
	position: relative;
	width: 100%;
	z-index: 10;
	color: rgba(51,102,152,1);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}

/*
	SIXTEENTH EFFECT
*/

.aButton16 {
	outline: none;
	border: none;
	background-color: #e3e3e3;
	padding: 14px 27px;
	position: relative;
	overflow: hidden;
}

.aButton16 .buttonLeft, .aButton16 .buttonRight {
	position: absolute;
	width: 4px;
	height: 105%;
	background-color: rgba(51,102,153,1);
	-webkit-transition: top 0.3s;
	-moz-transition: top 0.3s;
	transition: top 0.3s;
}

.aButton16:hover .buttonLeft, .aButton16:hover .buttonRight {
	top: 0px;
}

.aButton16 .buttonLeft {
	left: 0px;
	top: -105%;
}

.aButton16 .buttonRight {
	right: 0px;
	top: 105%;
}

.aButton16 .buttonBottom, .aButton16 .buttonTop {
	position: absolute;
	width: 105%;
	height: 4px;
	background-color: rgba(51,102,153,1);
	-webkit-transition: left 0.3s;
	-moz-transition: left 0.3s;
	transition: left 0.3s;
}

.aButton16:hover .buttonBottom, .aButton16:hover .buttonTop {
	left: 0px;
}

.aButton16 .buttonBottom {
	bottom: 0px;
	left: -105%;
}

.aButton16 .buttonTop {
	top: 0px;
	left: 105%;
}

.aButton16 .buttonFront {
	position: relative;
	width: 100%;
	z-index: 10;
	color: rgba(51,102,152,1);
	-webkit-transition: color 0.3s;
	-moz-transition: color 0.3s;
	transition: color 0.3s;
}