SOURCE

<button class="up">UP</button>
<button class="left">LEFT</button>
<button class="center">CENTER</button>
<button class="right">RIGHT</button>
<button class="down">DOWN</button>

body {
  text-align: center;
  padding-top: 20vh;
  background: #34495e;
}

button {
  width: 20%;
  display: block;
  margin: 2px auto; 
  font-size: 4vw;
  background: whitesmoke;
  border-radius: 2px;
  font-family: arial;
  padding: 15px 0px;
  cursor: pointer; /*光标覆盖时出现的样式*/
  transition: box-shadow 1s ease, color 1s ease;
}

.left, .center, .right {
  display: inline-block;
}

.up {
  color: #e74c3c;
  border: solid 2px #e74c3c;
}
.up:hover {
  box-shadow: inset 0 3em #e74c3c;
  color: whitesmoke;
}

.left {
  color: #f1c40f;
  border: solid 2px #f1c40f;
}
.left:hover {
  box-shadow: inset 6em 0 #f1c40f;
  color: whitesmoke;
}

.center {
  color: #7f8c8d;
  border: solid 2px #7f8c8d;
}
.center:hover {
  box-shadow: inset 0 0 0 2em #7f8c8d;
  color: whitesmoke;
}

.right {
  color: #3498db;
  border: solid 2px #3498db;
}
.right:hover {
  box-shadow: inset -6em 0 #3498db;
  color: whitesmoke;
}

.down {
  color: #27ae60;
  border: solid 2px #2ecc71;
}
.down:hover {
  box-shadow: inset 0 -3em #2ecc71;
  color: whitesmoke;
}