<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='https://fonts.googleapis.com/css?family=Droid+Serif:400,700' rel='stylesheet' type='text/css'><button class="button  search">Search</button><br/><br/><button class="button  arrow">Read more</button><br/><br/><button class="button  email">[email protected]</button><br/><br/><button class="button  phone">tel: 1234 567 890</button>

@button-colour: #009ED8;
@button-text: #ffffff;
@regular-text: #333;
@button-tint: fadeout(#000, 90%);
@background: #303036;

body {
	background: @background;
	text-align: center;
	text-rendering: auto;
	font-size: 17px;
	line-height: 1.6em;
	height: 100vh;
	overflow: hidden;
	padding: 18%;
	padding-top: 25vh; 
}

* {
	box-sizing: border-box;
}

.button {
	display: inline-block;
	font-family: "Montserrat", "Trebuchet MS", Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	position: relative;
	padding: .8em 1.4em;
	padding-right: 4.7em;
	background: @button-colour;
	border: none;
	color: white;
	transition: .2s;
	&:before,
	&:after {
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		padding-top: inherit;
		padding-bottom: inherit;
		width: 2.8em;
		content: "\00a0";
		font-family: 'FontAwesome', sans-serif;
		font-size: 1.2em;
		text-align: center;
		
		transition: .2s;
		transform-origin: 50% 60%;
	}
	&:before {
		background: @button-tint;
	}
	&:hover {
		background: darken(@button-colour, 10%);
	}
	&:active,
	&:focus {
		background: darken(@button-colour, 30%);
		outline: none;
	}
}

.button {
	min-width: 15em;
}

.arrow {
	background: #FE5F55;
	&:hover {
		background: darken(#FE5F55, 10%);
	}
	&:active,
	&:focus {
		background: darken(#FE5F55, 30%);
	}
	&:after {
		content: "\F054";
	}
	&:hover:after {
		-webkit-animation: bounceright .3s alternate ease infinite;
		animation: bounceright .3s alternate ease infinite;
	}
}

.phone { 
	background: #139675;
	&:hover {
		background: darken(#139675, 10%);
	}
	&:active,
	&:focus {
		background: darken(#139675, 20%);
	}
	&:after {
		content: "\F095";
	}
	&:hover:after {
		-webkit-animation: wiggle .05s alternate ease infinite;
		animation: wiggle .05s alternate ease infinite;
	}
}

.email {
	background: #C673B3;
	&:hover {
		background: darken(#C673B3, 10%);
	}
	&:active,
	&:focus {
		background: darken(#C673B3, 20%);
	}
	&:after {
		content: "\F0E0";
	}
	&:hover:after {
		-webkit-animation: none;
		-webkit-transform: skew(-20deg);
		animation: none;
		transform: skew(-20deg);
		text-indent: .1em;
	}
}

.search {
	&:after {
		content:"\f002";
	}
	&:hover:after {
		-webkit-animation: none;
		-webkit-transform: scale(1.4);
		animation: none;
		transform: scale(1.4);
	}
}


@-webkit-keyframes bounceright {
	from { -webkit-transform: translateX(0); }
	to   { -webkit-transform: translateX(3px); }
}

@-webkit-keyframes wiggle {
	from { -webkit-transform: rotate(0deg); }
	to   { -webkit-transform: rotate(30deg); }
}

@keyframes bounceright {
	from { transform: translateX(0); }
	to   { transform: translateX(3px); }
}

@keyframes wiggle {
	from { transform: rotate(0deg); }
	to   { transform: rotate(30deg); }
}