<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.