CSSのみで円柱形ボタンを作る

#完成形
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205287/9448bf09-4e5f-071a-c375-ceb932b713e5.gif" alt="ボタン本体+土台" width="300px">
#ボタン本体の作成
※説明順にCSSを追加していくので一部読みにくいCSSになっているかと思います。

##HTML
```HTML:HTML
<div class="bt">
  <div class="bt-top"></div>
  <div class="bt-body"></div>
</div>
```
##ボタン全体の大きさを決める
なるべく細部のCSSは固定したいので各パーツはこの値に対する%で指定していく。
今回はw=300px,h=300pxとする。

```CSS:CSS
.bt{
  width: 300px;
  height: 300px;
}
```
##各パーツのheightを決める
下の図を参考に全体のheightに対する上面(top)と側面(body)のheightを決める。
色は上面に対して側面をやや濃くするとそれっぽく見える。

```CSS:CSS
.bt-top{
  width: 100%;
  height: 50%;
  background-color: #FF7043; 
}
.bt-body{
  width: 100%;
  height: 75%;
  background-color: #F4511E;
}
```
###イメージ図：各パーツのheight
![top-body-height-01.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205287/3e23b358-d615-6e0e-c802-480180624d3a.png)

###現時点での形
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205287/82d1f523-408b-edae-ad82-c22c00c12207.png" alt="途中経過01" width="100px">



##丸みを加える
上面は単純に楕円形にすれば良い。
側面は右下と左下のみ丸みを加えるが、上面と同じ曲率にしなければならない。widthが同じなので水平方向は同じく50%で良いが、heightは違うので少し計算が必要。

上面のheightをtopH、側面のheightをbodyH、側面の垂直方向のradius半径をbodyVR[%]とすると、
bodyVR = ( topH / bodyH ) × 50%
で求められる。
※今回だとbodyVR = ( 50% / 75% ) × 50% = 2500% / 75 = 33.333…%

```CSS:CSS
.bt-top{
  width: 100%;
  height: 50%;
  background-color: #FF7043;
  /* ここから新規項目 */
  border-radius: 50%;
}
.bt-body{
  width: 100%;
  height: 75%;
  background-color: #F4511E;
  /* ここから新規項目 */
  border-radius: 0 0 50% 50% / 0 0 33.3% 33.3%; /*簡易的な数値*/
  border-radius: 0 0 50% 50% / 0 0 calc(2500% / 75) calc(2500% / 75); /*より厳密な数値*/
}
```
###現時点での形
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205287/7e7fba0c-40f4-14f3-921a-6f0cecf0d6ea.png" alt="途中経過02" width="100px">

##上面と側面を重ねる
`position`を使用。

```CSS:CSS
.bt{
  width: 300px;
  height: 300px;
  /* ここから新規項目 */
  position: relative;
}
.bt-top{
  width: 100%;
  height: 50%;
  background-color: #FF7043;
  border-radius: 50%;
  /* ここから新規項目 */
  position: relative;
  z-index: 1;
}
.bt-body{
  width: 100%;
  height: 75%;
  background-color: #F4511E;
  border-radius: 0 0 50% 50% / 0 0 33.3% 33.3%; /*簡易的な数値*/
  border-radius: 0 0 50% 50% / 0 0 calc(2500% / 75) calc(2500% / 75); /*より厳密な数値*/
  /* ここから新規項目 */
  position: absolute;
  bottom: 0;
  z-index: 0;
}
```

###現時点での形
円柱はこれで完成。
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205287/a5ac342a-7822-d848-fdaa-5ecb6c923787.png" alt="途中経過03" width="100px">

##ボタンを押し込む
今回はボタン全体に対してクリックを受け付ける(側面をクリックしても動作する)。

上面は高さが固定で位置だけの移動となる。
今回は上面のheightが50%なので、top<100%-50%にする。
※top>=100%-50%になると側面より下にめり込む位置になる。

側面は位置が固定で高さが以下のように変更となる。
bodyH = 100% - ( topH / 2 + (上面のtop) )
※今回は bodyH = 100% - ( 50% / 2 + (40%) ) = 35%
注意点としてはheightが変わるのでそれに伴い`border-radius`も再計算する必要があること。

```CSS:CSS
.bt:active > .bt-top{
  top: 40%;
}
.bt:active > .bt-body{
  height: 35%;
  border-radius: 0 0 50% 50% / 0 0 71% 71%; /*簡易的な数値*/
  border-radius: 0 0 50% 50% / 0 0 calc(2500% / 35) calc(2500% / 35); /*より厳密な数値*/
}
```

##ボタンのメイン部分の完成
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205287/54dbce79-e1bf-7f82-8fbb-ec6afeb792d8.gif" alt="ボタン本体" width="100px">

###`.bt`のサイズのみを変更してみる
![valgif1.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205287/d781ff9a-b428-7d5e-640e-fe8e44e62e06.gif)

#土台の作成
##HTML
```HTML:HTML
<div class="bt-outer">
  <div class="bt">
    <div class="bt-top"></div>
    <div class="bt-body"></div>
  </div>
  <div class="base-top"></div>
  <div class="base-body"></div>
</div>
```
##ボタン部分のCSS修正
widthとheightを`.bt-outer`に対する割合に変更。

```CSS:CSS
.bt{
  /* width: 300px; 変更前*/
  width: 60%;
  /* height: 300px; 変更前*/
  height: 60%;
  margin: 0 auto;
  position: relative;
}
```

##全体と土台のCSS
`perspective`については勉強不足なので結果を見つつ値を調整。

```CSS:CSS
.bt-outer{
  width: 400px;
  height: 300px;
  transform-style: preserve-3d;
  perspective: 500px;
}
.base-top{
  width: 100%;
  height: 50%;
  background-color: #BDBDBD;
  transform: rotateX(45deg);
  transform-origin: 50% 100%;
  position: absolute;
  bottom: 35%;
}
.base-body{
  width: 100%;
  height: 35%;
  background-color: #9E9E9E;
  position: absolute;
  bottom: 0;
}
```
##土台付きボタン完成
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205287/9448bf09-4e5f-071a-c375-ceb932b713e5.gif" alt="ボタン本体+土台" width="100px">
###`.bt-outer`のサイズのみを変更してみる
![valgif2.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205287/88af533f-84a8-cffd-0c3c-7caccd52c574.gif)

#おまけ
##側面をグラデーションにしたver.
<img src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/205287/0af6796e-f7e2-adf2-db7d-6de0212adc57.gif" alt="ボタングラデver." width="400px">

```CSS:CSS
.bt-body{
  /* 略 */
  /* background-color: #F4511E; */
  background: linear-gradient(to right,#FF7043,#E64A19 70%,#E64A19 80%,#FF7043);
  /* 略 */
}
```