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

## 完成形を確認
クリックボタンを押したらボタンがへこむアニメーションをつくりましょう:smile:

![完成.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/af639de4-00e6-5e7e-0c8f-0901a2a33ea2.gif)

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

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

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

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

```例.html
<p>You！押しちゃいな</p>
```

```例.css
p:active {
  background-color: red;
}
```

![クリック.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/06d7b727-03f7-1b88-eeba-289817c97846.gif)

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

## アニメーション作成

![完成.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/27c06d72-ef0a-faed-3a76-617716d5a775.gif)

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

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

まずはHTML

```ボタンつくるで.html
<p>You！押しちゃいな</p>
```

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

ではお次はCSS:smile:

```ボタンつくるで.css
p {
  background-color: red;
  box-shadow: 0px 10px #bfbfbf;
  width: 150px;
  text-align: center;
}
```

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

<img width="162" alt="スクリーンショット 2020-01-21 3.46.19.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/0be71cf2-fd4f-e80c-f23a-784db68ae0af.png">

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

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

```ボタンつくるで.css
p:active {

}
```

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

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

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

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

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

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

```ボタンつくるで.css
p:active {
  box-shadow: none;
}
```

![しゃどう.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/32b53f33-baf7-2710-8302-4d0adf0b404a.gif)

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

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

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

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

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

```ボタンつくるで.css
p:active {
  box-shadow: none;
  position: relative;
  top: 10px;
}
```

position: relative; は [【CSS】position: absolute; と position: relative;](https://qiita.com/mikimikiman/items/ebe0e32313cd272b5484#position-relative) でまとめたときに基準位置を決めることで使用しました。
でも**要素の位置を変更する**という使い方もできます:smile:

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

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

![完成.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/b492ebde-ebfa-bb4d-125d-922a72b151a2.gif)

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

## おまけ

![ezgif.com-video-to-gif.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/532773/ce67e28c-0260-90c9-6522-2055bda9ee2e.gif)

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

```ボタンらしいボタン.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;
}
```