押したくても押せなかった人のために「バスの停止ボタン」を作る

どうも7noteです。子供の頃、押したくても押せなかった大人のために。作りました。

※音は出ません

押し込むボタン風につくります。
ランプがついているようにさせるため、文字に影などもつけています。

作り方

index.html

<div class="btn">
  <div class="lanp"><span>とまります</span></div>
  <div class="push">お降りの方は<br>このボタンを<br>押して下さい</div>
</div>

style.css

.btn {
  width: 110px;
  background: #E1B662;
  border-radius: 15px;
  padding: 15px 10px;
}

.lanp {
  text-align: center;
  background: #493B57;
  border-radius: 10px 10px 0 0;
  padding: 10px 0;
  color: #EA281C;
  text-shadow: 0px 0px 5px #EA281C;
}

.lanp span {
  visibility: hidden;  /* 初期状態では文字を見えなくする */
}

.lanp.on span {
  visibility: visible; /* クラスonがついたら文字を表示 */

}

.btn .push {
  background: #DD6F31;
  border-bottom: 5px solid #C0221F;
  border-radius: 0 0 10px 10px;
  padding: 5px;
}


.btn .push:hover {
  cursor: pointer;
}

.btn .push:active {  /* 押されている間だけ効かせるCSS */
  border-bottom: 5px solid #DD6F31;
  padding-top: 7px;
  padding-bottom: 3px;
}

script.js

$(function(){
  $(".push").on("click",function(){  /* pushが押された時 */
    $(".lanp").addClass("on");       /* ランプ部分にクラス(on)をつける */
  });
});

※jQueryを使用しています。

解説

特に解説しなければならないポイントもないのですが、ちょっとだけポイント紹介。

クリックされている最中だけにCSSを効かせるのは:activeの疑似セレクタを使うことで再現できます。
:activeでborderの色を変更しつつ、上下のpaddingを微調整してボタンを押し込む再現をしています。

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ