[CSS]クリック時のボタン装飾に関して(:active,box-shadow,cursor)

今回は、HTMLとCSSを用いて
クリック時にボタンが立体的かつ凹む（押している実感）仕様をまとめます。

ここでポイントとなるのが、
**:active,box-shadow,cursor**の3つのプロパティになるかと思います。
#完成品
![ダウンロード (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/2f2fdc29-2ded-1a77-c409-ce3e02efc188.gif)

下記の流れで完成させます。
あくまで学習した事を詰め込んだので、
必要がないCSSもあるため、そこは各々で取捨選択をお願いいたします。

#作成する手順

| No.| 操作<br>ファイル | 手順 |
|:-:|:-:|:-:|
| 1  | HTML＆CSS| Boxを作成する  |
| 2 | HTML＆CSS| Box内に文字を作成する|
| 3 | CSS  | Boxの角を丸める  |
| 4 |  CSS | Boxを立体にする  |
| 5 |  CSS | クリック時に凹ませる  |
| 6 |  CSS | カーソル表示を変更する  |
| 7 |  ー | 完成です。  |

それぞれ説明していきます。


#1.box作成する （+色をつけます。）(HTML+CSS)
HTMLで、`divタブ`を用いてボックスを作成します。

CSSでは、ボックスのサイズと色を反映させます。
なお、色は、`background-color`でできます。

**[コード]**

```html:box.html
 <div class="box">
 </div>
```
```css:box.css
 .box {
    width:200px;
    height: 50p;
    background-color: limegreen;
  }
```
**[確認]**
![スクリーンショット 2021-01-25 4.00.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/4c492177-cedf-ea47-81f1-0bde5b93fdc5.png)

#2.Box内に文字を入れる。（HTML+CSS）

HTMLで、先ほど作ったボックスの中に
`divタブ`と`pタブ`を用いて文字を入れます。

CSSでは、入れた文字の色や大きさを決めます。

**[コード]**

```html:index
.html
 <div class="box">
   <div class="box-text">
    <p>登録はこちら</p>
   </div>
 </div>
```
```css:box.css
.box { ... }  /*略します。*/
.box-text {
  color: white;
  text-align:center;
  line-height: 50px;
  font-size: 16px;
}
```
**[確認]**
![スクリーンショット 2021-01-25 4.00.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/72695e35-fcfb-e6cd-b22a-d79e3ac16414.png)

#3.角を丸める (CSS)

手順1で作成したボックスの角を丸めるために、
CSSで、`border-radius`を使用します。

**[コード]**

```css:box.css
.box { 
  width:200px;
  height: 50p;
  background-color: limegreen;
  border-radius: 5px;       
}
.box-text { ... }
```
**[確認]**
![スクリーンショット 2021-01-25 4.00.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/786214ef-68e4-765f-bbd1-09435f6fd158.png)

#4.Boxを立体にする（CSS）
ボックスを立体的にするために、
CSSで、`box-shadow`を使用します。

<details><summary>box-shadowの使い方</summary><div>
 box-shadow: `水平方向` `垂直方向` `色`; 
</div></details>
<br>
コードでは、垂直方向のみですので、
下側にgreenの影ができています。

**[コード]**

```css:box.css
.box { 
  width:200px;
  height: 50p;
  background-color: limegreen;
  border-radius: 5px;
  box-shadow: 0 7px green; 
       
}
.box-text { ... }
```
**[確認]**
![スクリーンショット 2021-01-25 4.02.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/c2fe5e9e-9e40-fc20-cc73-b26589799a6f.png)

#5.クリック時に凹ませる(CSS)

ここで、`:active`を使います。

<details><summary>:activeの使い方</summary><div>
 .box:active { }
 変化させたいセレクタの横につけます。 
</div></detail>

プロパティは、下記の通りです。

| プロパティ | 値 |意味|
|:-:|:-:|:-:|
| position  | relative   |ボックスと位置関係の紐付け|
| top  | __px  |上から下にどのぐらいおろすのか|
| box-shadow  | none  |効果を無くす|

**[コード]**

```css:box.css
.box { 
  width:200px;
  height: 50p;
  background-color: limegreen;
  border-radius: 5px;
  box-shadow: 0 7px green; 
}
.box:active {
 position: relative;
 top: 7px;
 box-shadow: none;
}
.box-text { ... }
```
**[確認]**
![ダウンロード.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/124f3aa5-7a22-3ba6-4c44-e87137e52f3f.gif)

#6.カーソル表示を変更する(CSS)
ボックスに、カーソルを合わせた時にカーソルを変化させます。
CSSで、`cursor`を使用します。

**[コード]**

```css:box.css
.box { 
  width:200px;
  height: 50p;
  background-color: limegreen;
  border-radius: 5px;
  box-shadow: 0 7px green; 
  cursor: pointer;
}
.box:active { ... }
.box-text { ... }
```
**[確認]**
![ダウンロード (1).gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1029483/2f2fdc29-2ded-1a77-c409-ce3e02efc188.gif)


#7.完成
完成コードになります。
<details><summary>box.html</summary><div>

```html:box.html
<link rel="stylesheet" href="box.css">

<div class="box">
  <div class="box-text">
   <p>登録はこちら</p>
  </div>
</div>

```

</div></details>
<details><summary>box.css</summary><div>

```css:box.css
.box {
  width:200px;
  height: 50px;
  background-color: limegreen;
  border-radius: 5px;
  box-shadow: 0 7px green;
  cursor: pointer;
}

.box-text {
  color: white;
  text-align:center;
  line-height: 50px;;
  font-size: 16px;
}

.box:active {
  position: relative;
  top: 7px;
  box-shadow: none;
 }
```
</div></details>


以上、たにーでした。