【CSS】クリックボタンを押したらボタンがへこむアニメーション

完成形を確認

クリックボタンを押したらボタンがへこむアニメーションをつくりましょう

上のアニメーションのようなものを完成させましょう！
とても簡単にできます
・・・が、そのまえに active の説明

:active

要素がクリックされているあいだだけ CSS が適用される

セレクタ:active {
  プロパティ: 値;
}

書き方は hover と似ていますね

例.html

<p>You！押しちゃいな</p>

例.css

p:active {
  background-color: red;
}

こんな感じでクリックすると背景が赤くなります
これを踏まえてアニメーションを作成していきましょう！

アニメーション作成

このアニメーションを作ろうとしたときどのようにプログラムは動いているのだろうか

ポイント
　 クリックするとアニメーションが動いている
　 クリックすると影がなくなっている
　 クリックすると赤いボタン部分が下に移動している
この３点を目安に作成していこう

まずはHTML

ボタンつくるで.html

<p>You！押しちゃいな</p>

これはもう簡単
これでできあがり

ではお次はCSS

ボタンつくるで.css

p {
  background-color: red;
  box-shadow: 0px 10px #bfbfbf;
  width: 150px;
  text-align: center;
}

ボタンの色を赤にして
ボタンの下に10pxのグレーの影をつくって
幅は150pxくらいでいいかな・・・
見栄え良く文字は中央揃え

はい！とりあえずボタンは完成
ここからアニメーションをつけていこう

クリックするとアニメーションが動いているので・・・

ボタンつくるで.css

p:active {

}

まずは1点目のポイントの

クリックするとアニメーションが動いている

ということなので active を設定。

active を設定しただけなので中身はカラ。
ここになにを入れていくかというと
2点目のポイントの

クリックすると影がなくなっている

という部分。
さっそく入力してみよう

ボタンつくるで.css

p:active {
  box-shadow: none;
}

影なくなりました！
影をなくしたいときは box-shadow: none; にすれば影は消えてくれます

さて、影は消えてくれたけどまだボタンらしくない。。
これではただ影が消えただけ。
どうするのかといえば、3点目の

クリックすると赤いボタン部分が下に移動している

を設定すればアニメーションは完成です

p:active にさらにCSSを追加します

ボタンつくるで.css

p:active {
  box-shadow: none;
  position: relative;
  top: 10px;
}

position: relative; は 【CSS】position: absolute; と position: relative; でまとめたときに基準位置を決めることで使用しました。
でも要素の位置を変更するという使い方もできます

今回は 10px の影がなくなった分だけ下にずらしたいため
position: relative;
top: 10px;
とします。

ではアニメーションを見てみましょう

ボタンを押すことができました

おまけ

さっきのコードを踏まえたうえで、よりボタンぽいものを作成しました。
コードは下記となります。

ボタンらしいボタン.html

<p>click!</p>

ボタンらしいボタン.css

p {
  background-color: #1e90ff;
  box-shadow: 0px 3px #000080;
  width: 100px;
  text-align: center;
  cursor: pointer;
  color: white;
  font-size: 20px;
  line-height: 30px;
  border-radius: 50px;
}

p:active {
  box-shadow: none;
  position: relative;
  top: 3px;
}