<button class="button btn_small">smallボタン</button>
<button class="button">normalボタン</button>
<button class="button btn_large">largeボタン</button>

.button {
  /*ボタンの基本設定*/
  display: block;
  border: none;
  border-radius: 5px;
  margin-bottom: 1em;
  color: #fff;
  transition: all .5s;
  cursor: pointer;
  /*色をあらかじめ設定*/
  --colo_h: 194;
  --colo_s: 86%;
  --colo_b: 54%;
  /*ボタンのpaddingとfont-sizeをあらかじめ設定*/
  --unit: 1rem;
  font-size: var(--unit);
  padding: calc( var(--unit) / 2 ) var(--unit);/*上下paddingは1/2として設定*/
  background: hsl(var(--colo_h), var(--colo_s), var(--colo_b));
}
.btn_small {
  --unit: 0.8rem;
  background: hsl(var(--colo_h), var(--colo_s), var(--colo_b));
}
.btn_large {
  --unit: 1.3rem;
  padding: calc( var(--unit) / 2 ) calc( var(--unit) * 2 );/*上下paddingは1/2、左右は2倍に設定*/
  background: hsl(var(--colo_h), var(--colo_s), var(--colo_b));
}
.button:hover {
  --colo_b: 28%;
}