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

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

完成形

完成はこのような感じになります。

See the Pen RwpqPGP by saladbowl77 (@saladbowl77) on CodePen.

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

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を少し書き換えます。

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

以下の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は適当に各自の環境に合わせてお願いします。

<audio id="musicPlayer" src="/button.mp3"></audio>

//ボタンの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();
})

最後に

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