.silver-button {
  touch-action: manipulation;
  display: inline-block;
  outline: none;
  font-family: inherit;
  font-size: 1em;
  box-sizing: border-box;
  border-radius: 0.3em;
  height: 2.75em;
  line-height: 2.5em;
  text-transform: uppercase;
  padding: 0 1em;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  background-size: 100% 100%;
  background-position: center;
  border: 1px solid #5c5c5c;
  color: rgb(60, 60, 60);
  text-shadow: 0 2px 2px rgba(255, 255, 255, 0.8);
  background-image: linear-gradient(
    160deg,
    #4a4a4a,
    #9e9e9e,
    #ffffff,
    #9e9e9e,
    #4a4a4a
  );

  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(100, 100, 100, 0.4),
    inset 0 -2px 5px 1px rgba(60, 60, 60, 1),
    inset 0 -1px 1px 3px rgba(255, 255, 255, 1);
}

.silver-button:focus,
.silver-button:hover {
  background-size: 150% 150%;
  box-shadow:
    0 10px 20px rgba(0, 0, 0, 0.19),
    0 6px 6px rgba(0, 0, 0, 0.23),
    inset 0 -2px 5px 1px #a0a0a0,
    inset 0 -1px 1px 3px rgba(255, 255, 255, 1);

  border: 1px solid rgba(100, 100, 100, 0.6);
  color: rgba(60, 60, 60, 0.8);
}

.silver-button:active {
  box-shadow:
    0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(100, 100, 100, 0.4),
    inset 0 -2px 5px 1px #a0a0a0,
    inset 0 -1px 1px 3px rgba(255, 255, 255, 1);
}