.buttons {
  display: inline-block;           /* 改行なしのブロック要素 */
  font-size: 20px;
  position: relative;              /* 相対位置指定 */
  width: 100%;                    /* 横幅 */
  height: 50px;                    /* 高さ */
  text-align: center;              /* 水平方向は中央揃え */
  line-height: 49px;               /* 行の高さ */
}
.buttons span {
  display: block;                  /* ブロック要素 */
  position: absolute;              /* 親要素の左上を基準位置 */
  width: 100%;                     /* 横幅 */
  height: 100%;                    /* 高さ */
  transform-style: preserve-3d;    /* 重なりを3Dで表示 */
  transition: 0.3s;   /* 変化時間 */
}
.buttons span:nth-child(1) {
  background-color: #026ab3;   /* Buttonボタンの色 */
  color: #fff;          /* Buttonの文字の色 */
  transform: rotateX(0deg);        /* 横軸の回転なし */
  transform-origin: 0 50%  -28px;  /* transformの起点 */
}
.buttons span:nth-child(2) {
  background-color: #6FADD9;   /* Clickボタンの色 */
  color: #fff;          /* Clickの文字の色 */
  transform: rotateX(90deg);       /* 横軸で90度回転 */
  transform-origin: 0 50%  -28px;  /* transformの起点 */
}
.buttons:hover span:nth-child(1) {
  transform: rotateX(-90deg);      /* 横軸で前方に90度回転 */
}
.buttons:hover span:nth-child(2) {
  transform: rotateX(0deg);        /* 横軸の回転なし */
}