例の早押しボタンをCSSだけで作ってみた

例の早押しボタンアプリで有名なボタンをCSSだけで作ってみました。


## 完成形
完成はこのような感じになります。
![完成形](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/643158/6cfdd25e-ac57-0f32-ce6a-c0e32e5c3f83.png)

<p class="codepen" data-height="265" data-theme-id="dark" data-default-tab="css,result" data-user="saladbowl77" data-slug-hash="RwpqPGP" style="height: 265px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;" data-pen-title="RwpqPGP">
  <span>See the Pen <a href="https://codepen.io/saladbowl77/pen/RwpqPGP">
  RwpqPGP</a> by saladbowl77 (<a href="https://codepen.io/saladbowl77">@saladbowl77</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

## html
あまりタグの付け方が上手くないのはご愛敬ということで...(良い書き方あれば教えてください....)

```html
<div id="BuzzerQuizButton">
    <div class="buttonTop" id="buttonTop1"></div>
    <div class="buttonTop" id="buttonTop2"></div>
    <div class="buttonTop" id="buttonTop3"></div>
    <div class="buttonBottom" id="buttonBottom1"></div>
    <div class="buttonBottom" id="buttonBottom2"></div>
    <div class="buttonBottom" id="buttonBottom3"></div>
</div>
```

## css

```css
section#game div#BuzzerQuizButton {
    width: 300px;
    height: 300px;
    display: block;
    margin: 0 auto;
    position: relative;
}
section#game div#BuzzerQuizButton div{
    position: absolute;
    top: 0;
    left: 0;
}
section#game div#BuzzerQuizButton div.buttonTop{
    width: 250px;
    height: 250px;
    margin: 0 25px;
}
section#game div#BuzzerQuizButton div#buttonTop1 {
    background-color: #dc5a1c;
    clip-path: ellipse(50% 25% at 50% 43%);
    z-index: 1000;
}
section#game div#BuzzerQuizButton div#buttonTop2 {
    background-color: #ae231d;
    clip-path: ellipse(50% 25% at 50% 53%);
    z-index: 995;
}
section#game div#BuzzerQuizButton div#buttonTop3 {
    background-color: #ae231d;
    clip-path: polygon(0 42%, 100% 42%, 100% 54%, 0 54%);
    z-index: 990;
}
section#game div#BuzzerQuizButton div.buttonBottom{
    width: 300px;
    height: 300px;
}
section#game div#BuzzerQuizButton div#buttonBottom1 {
    background-color: #f2f5c4;
    clip-path: ellipse(50% 27% at 50% 50%);
    z-index: 985;
}
section#game div#BuzzerQuizButton div#buttonBottom2 {
    background-color: #b19969;
    clip-path: polygon(0 50%, 100% 50%, 100% 64%, 0 64%);
    z-index: 980;
}
section#game div#BuzzerQuizButton div#buttonBottom3 {
    background-color: #b19969;
    clip-path: ellipse(50% 27% at 50% 64%);
    z-index: 975;
}
```

## アップグレードしたい方へ
### step1 ボタンを押し込む
アップグレードしたい人がいるかわかりませんが、cssだけでボタンを押し込む動作を実装します。

タッチ画面用にhtmlを少し書き換えます。

```html
<div id="BuzzerQuizButton" ontouchstart="">
<!-- 略 -->
</div>
```

以下のCSSを追加します。

```css
section#game div#BuzzerQuizButton:active div#buttonTop1{
    transform: translateY(5px);
}
section#game div#BuzzerQuizButton:active div#buttonTop3{
    clip-path: polygon(0 45%, 100% 45%, 100% 54%, 0 54%);
}
```

### step2 ボタンの音を追加する。
インターネットでフリー素材のボタンを押す素材を探してきて、JavaScriptで鳴らします。

htmlは適当に各自の環境に合わせてお願いします。

```html
<audio id="musicPlayer" src="/button.mp3"></audio>
```
```javascript
//ボタンのID取得
const BuzzerQuizButton = document.getElementById("BuzzerQuizButton");
//audioの取得
const musicPlayer = document.getElementById("musicPlayer");
// iOS対応のため、無音で一度鳴らしておく
window.onload = function() {
    // ミュート
    musicPlayer.muted = true;
    // 鳴らす
    musicPlayer.play();
    // 止める
    stop();
}
BuzzerQuizButton.addEventListener('click', function(){
    // ミュート解除
    musicPlayer.muted = false;
    // 再生位置を戻しておく
    musicPlayer.currentTime = 0;
    // 再生
    musicPlayer.play();
})
```

## 最後に
使えるかわかりませんが、ネタとしてどうぞ!