2020/11/16 (更新日:2021/5/13)
中央にあるbuttonを押した時、cssで影を消して凹むように見せます！
いつも使うbuttonを実際に押したようにアニメーションしたいと思いませんか？
ここでは、まづ中央に配置した影のある立体的なbuttonを作ります。
ポインターをhoverすると表示が変わり教えてくれます。
Buttonを押した時、立体的なbuttonが実際に凹むようにアニメーションします。
色々なところで活用できるbuttonです。
■もくじ
1. cssでbuttonを中央に配置する
2. ポインターをhoverするとcssでbuttonの表示が代わり教えてくれる
3. buttonに影を付けて、cssで立体的に表示する
4. buttonを押した時、cssでbuttonの影を消すアニーメーションをする
5.まとめ
中央にあるbuttonを押した時、cssで影を消して凹むように見せます！
始めに、buttonの最終結果を見てください。
Buttonを押すと、実際にbuttonが凹んだように表示しているのが分かります。
配置や形状・配色等は自分の好きなように変えてお使いください。
See the Pen ボタンがへこむ by Seiji Nakamura (@sjnkmr_777) on CodePen.
1. cssでbuttonを中央に配置する
【HTML】
HTMLのコードはこれが全てです。
<div class="box-button">
<span class="btn push">ボタンを押すと凹みます</span>
</div>【CSS】
.box-buttonというボックスを縁取りをして、細線で囲みます。
ボックス内では、textが中央に位置します。
.box-button {
margin:40px;
padding: 40px;
border: 1px solid #87ceeb;
text-align: center;
} . btn：ボタンの形を整えます。
文字色は白。
ボタンはinline-blockにしてブロック要素で扱えるようにします。
透明度を0.8にして薄く透けう設定。
ボタンの隅は丸角にします。
.btn {
/* padding: 8px 24px;*/
padding: 20px 60px;
color: white;
display: inline-block;
opacity: 0.8;
border-radius: 5px;
}2. ポインターをhoverするとcssでbuttonの表示が代わり教えてくれる
【CSS】
ボタンをhoverしている間、透明度を１にしてはっきりと表示させます。
また、カーソルはポインターを使用します。
.btn:hover {
cursor: pointer;
opacity: 1;
}3. buttonに影を付けて、cssで立体的に表示する
【CSS】
ボタンの色を薄めの色にします。
少し濃い目の色でボタンの下に影を作ります。
.push {
background-color: #6495ed;
box-shadow: 0 8px #4169e1;
}4. buttonを押した時、cssでbuttonの影を消すアニーメーションをする
【CSS】
activeと判断した時に、ボタン位置を下にずらす。
同時に、ボタンの下の影を消す。
ボタンが押されて凹む動作を実現しました。
.push:active {
position: relative;
top: 8px;
box-shadow: none;
}5.まとめ
まとまっているので、このまま修正すれば使えます。
皆様の業務にご活用ください。
＊最後まで読んでいただきありがとうございます。
舌足らずで説明不足の所はお許しください。
Copyright–Seiji Nakamura, 2020 All Rights Reserved.
