ホバーで背景が変わる、角丸グラデーションボタンの作り方

## グラデーション線の角丸ボタンってどう作れば良いの？？
最近、こんなボタンよく見かけますよね。
**グラデーションが付いているボタン**です。:sparkles:
ホバー無しは、角丸グラデーションボタンを表示して、
ホバーしたら、背景もグラデーションにする、というcssを紹介します。

▼ホバー無し
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/1a57fccd-2370-9c2d-d3ed-a42c240ee6eb.png)


▼ホバー時
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/ffa86601-8640-b292-659a-ee71a6973a77.png)

![Adobe Express 2024-05-20 23.06.16.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/fda01b95-5c74-f792-660e-d1f04fd72b6e.gif)



色んな記事を読んで、やっと実装できたので、記録しておきます。:writing_hand_tone1:
参考にした記事は下記です。

https://mariokun.com/3044/

https://saruwakakun.com/html-css/basic/linear-radial-gradient#google_vignette

これを実装するために、私が何をしたか、カンタンに説明すると。
まず、**グラデーションの線を一発で実現できるミラクルなcssは今のところ無い**!のです。:frowning2:
なので、疑似要素を使って実現しました。
**beforeを下敷きに、afterを重ねるイメージです。**
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/8fd68667-ff42-1c3e-fe31-4271a149b16d.png)




## STEP1.htmlを記述

▼　まず、divとaでコーディング
```
	<div class="linkBtnWrap">
		<a class="linkBtn" href="">詳しく見る</a>
	</div>
```
▼今はこんな見た目
 ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/b0762e8b-d32c-4a29-414c-885d70339e16.png)

## STEP2.CSSを使ってちょっとだけ整えます。
```
 a.linkBtn {
			padding: 15px 98px;
			color: #000;
			background: #fff;
			line-height: 1;
			font-size: 16px;
			font-weight: 100;
           　　text-decoration: none;
		}
```
▼今はこんな見た目。何も無い。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/691be54c-8e51-8f56-52ce-7e46d6725d30.png)


## STEP3.疑似要素を使って、グラデーションを付ける
次は、本格的に見た目を整えます。
下図の様なイメージで、beforeとafterを重ね、after要素を少し小さく見せて、グラデーションの囲い線を表現します。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/cc8b4298-7544-3fc2-061b-85af7aa419c3.png)

```
.linkBtnWrap {
			a{
				padding: 25px;
				max-width:200px;
				margin: 30px auto;
				text-align: center;
				display: block;
				position: relative;
				
				&::before,&::after{　　/* before,after共通設定 */
					content: '';
					display: block;
					width: 100%;
					height: 100%;
					position: absolute;
					border-radius: 50px;
                    z-index: -1;
				}
				&::before{
					left: 0;
					top: 0;
					background: linear-gradient(to right, #3366CC, #00AD9B);		
				}
				&::after{
					background: #ebeff4;
					width: calc(100% - 10px);
					height: calc(100% - 10px);
					left: 2px;
					top: 2px;
					padding: 3px;
				}
			}
		}
  ```
  ▼beforeとafter　はこんな見た目
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/d2f9a5c0-49b6-df7e-7eaf-affabf404c2b.png)



グラデーションの線の太さを調整したいときは、&::afterのpaddingやtop,leftを触りましょう！

 
:::note info 

**ポイント:point_up:　余白を持たせるためのスタイル指定** 
```
                    width: calc(100% - 10px);
					height: calc(100% - 10px);
```

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/35ea3faa-e1ef-ebb4-3060-929155fb5d44.png)


 要素の幅を、親要素の幅の100%から10ピクセル引いた値に設定します。
 例えば、親要素の幅が500ピクセルの場合、子要素の幅は490ピクセル（500px - 10px）になります。
 要素の高さを、親要素の高さの100%から10ピクセル引いた値に設定します。
 例えば、親要素の高さが300ピクセルの場合、子要素の高さは290ピクセル（300px - 10px）になります。

 **余白が10ピクセルになることで、要素が親要素の端にぴったりくっつかず、見た目に余裕が生まれます:grinning:。** 

:::

▼今はこんな見た目。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/398935d7-f27b-0e80-da06-9a67c78bf3e0.png)

## STEP4.ホバーのcssを実装
上記のcssに、以下のcssを付け足します。

 ```

				&:hover::after{
					background: linear-gradient(45deg,#3366CC, #00AD9B);
					background-position: right center;
				}
				&:hover{
					color: #ebeff4 !important;
				}
 
 ```

 ▼こんな見た目＆挙動になります。
![Adobe Express 2024-05-20 23.06.16.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3638020/ef3a2dcc-ae37-2980-c499-5108f499a4df.gif)


## さいごに
結構苦戦した実装でしたが、要所要所で自分なりに理解して実装するのが大事だな、と思いました。
難しいと思うことは、小さく分解して理解するのが大切ですね。:open_mouth: