button {
  cursor: pointer;
  width: 100%;
  height: 50px;
  font-size: 26px;
  font-family: 'Alegreya Sans SC', sans-serif;
  display: block;
  margin: 20px;
  transition: all 0.3s;
}

button:hover {
  transition: all 0.2s;
}

button:focus {
  outline: none;
}

button:active {
  transition: none; /* So when you tap, effect is instant */
  padding: 0; /* Firefox adds padding because it's a special sausage */
}

button#sizes {
  border: none;
  background-color: white;
  box-shadow11111111: 0 1px 9px rgba(0,0,0,0.1),
              0 0 0 100px #1cb inset;
     box-shadow: 0 3px 20px rgba(0,0,0,0.3),
              0 0 0 2px white inset;
  transform: skewX(-18deg);
  transition: none;
    background: #1B75BA;
    color: #ffffff;
    font-size: 18px;
}

button#sizes:hover {
  box-shadow: 0 3px 20px rgba(0,0,0,0.3),
              0 0 0 2px white inset;
  background-color: #26A7DF;
  transition: all 0.2s;
}

button#sizes:active {
  color: #1cb;
  box-shadow: 0 3px 20px rgba(0,0,0,0.3),
              0 0 0px 200px white inset;
  transition: none;
}