目的
- HTMLファイルのボタンをクリックした時にボタンが押されたように見える設定方法をまとめる。
押さえるポイント
- 影が設定されたボタンに対してクリックされたら影を消し、影の分だけ要素を下に下げることにより押されているようなアニメーションを付ける。
- クリックしたときに変化させたいbutton要素かクラス名をCSSファイルで設定する際に「要素名かクラス名:active」と指定する。
- activeになった時に「影を消す」と「要素を影の分だけ下げる」を設定する。
- 影を消す設定はbox-shadowプロパティでnoneを与える。
- 要素を影の分だけ下げる設定はpositionプロパティでrelativeを与え、その後にtopプロパティにピクセル数を与えて設定する。
※positonプロパティにrelativeを与え、その後でtopプロパティでピクセル数を与えることでpositon: relative;を設定した要素を本来の位置からtopで指定したピクセル数だけ下げることができる。
書き方の例
- 下記にCSSファイルの内容を記載する。
要素の名前かクラス名:active {
box-shadow: none;
position: relative;
top: クリックした時に要素を下げたいピクセル数;
}
より具体的な例
- 下側に10pxのbox-shadowが設定されたbutton要素がクリックされた時にボタンが押下されたように見せる設定をする。(10ピクセルの影が設定された要素に対して設定されている影を消し、要素を影の分だけ下に下げることによりあたかも立体的なボタンが押されたように見せる)
- 下記にHTMLファイルの内容を記載する。
<button>新規登録</button>
- 下記にCSSファイルの内容を記載する。
button:active {
box-shadow: none;
position: relative;
top: 10px;
}