どうも7noteです。子供の頃、押したくても押せなかった大人のために。作りました。
※音は出ません
押し込むボタン風につくります。
ランプがついているようにさせるため、文字に影などもつけています。
作り方
index.html
<divclass="btn"><divclass="lanp"><span>とまります</span></div><divclass="push">お降りの方は<br>このボタンを<br>押して下さい</div></div>style.css
.btn{width:110px;background:#E1B662;border-radius:15px;padding:15px10px;}.lanp{text-align:center;background:#493B57;border-radius:10px10px00;padding:10px0;color:#EA281C;text-shadow:0px0px5px#EA281C;}.lanpspan{visibility:hidden;/* 初期状態では文字を見えなくする */}.lanp.onspan{visibility:visible;/* クラスonがついたら文字を表示 */}.btn.push{background:#DD6F31;border-bottom:5pxsolid#C0221F;border-radius:0010px10px;padding:5px;}.btn.push:hover{cursor:pointer;}.btn.push:active{/* 押されている間だけ効かせるCSS */border-bottom:5pxsolid#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制作のちょいテク詰め合わせ