<html>
	<head>
		<meta charset="UTF-8">
		<title>HBts</title>
		<link rel="stylesheet" href="HBts.css">
	</head>
	<body>
		<input type="button" value="NQUARE" class="hcol">
	</body>
</html>
body {
	margin: 0;
	padding: 0;
}

.hcol {background-image: linear-gradient(to right, #000000 0%, #434343  51%, #000000  100%)}
.hcol {
	margin: 10px;
	width: 90px;
	height: 35px;
	text-align: center;
	text-transform: uppercase;
	transition: 0.3s;
	background-size: 200% auto;
	color: white;            
	border: none;
	border-radius: 10px;
	display: block;
	box-shadow: 0px 3px rgba(0, 0, 0, 0.3), 0 0 10px 1px rgba(0, 0, 0, 0.22);
}

.hcol:hover {
	background-position: 100%;
	transform: translateY(-1px);
	letter-spacing: 1px;
}

.hcol:focus {
	outline: 0;
}

.hcol:active {
	letter-spacing: normal;
	transition: 0.1s;
	transform: translateY(2px);
	box-shadow: none;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.