:root {
  --btn-color: gray;
  --btn-bgcolor: white;
}

.btn03 {
  position: relative;
  margin: 0 auto;
  /*ボタンの形状*/
  text-decoration: none;
  display: block;
  background-color: transparent;
  text-align: center;
  border-radius: 25px;
  border: solid 1px var(--btn-color);
  outline: none;
  /*アニメーションの指定*/
  transition: all 0.2s ease;
  font-size: 16px;
  font-weight: 700;
  font-family: 'Zen Maru Gothic', sans-serif;
}

.btn03:active {
  border-color: transparent;
}

/*ボタンの中のテキスト*/
.btn03 span {
  position: relative;
  z-index: 2;
  /*z-indexの数値をあげて文字を背景よりも手前に表示*/
  /*テキストの形状*/
  display: block;
  padding: 10px 30px;
  background: var(--btn-bgcolor);
  border-radius: 25px;
  color: var(--btn-color);
  /*アニメーションの指定*/
  transition: all 0.2s ease;
  user-select: none;
}

/*== 下に押し込まれる（立体が平面に） */

/*影の設定*/
.pushdown:before {
  content: "";
  /*絶対配置で影の位置を決める*/
  position: absolute;
  top: 4px;
  left: 0;
  /*影の形状*/
  width: 100%;
  height: 100%;
  border-radius: 25px;
  background-color: var(--btn-color);
}

.pushdown:active span {
  background-color: var(--btn-color);
  color: var(--btn-bgcolor);
  transform: translateY(4px);
}