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

グラデーション線の角丸ボタンってどう作れば良いの？？

最近、こんなボタンよく見かけますよね。
グラデーションが付いているボタンです。
ホバー無しは、角丸グラデーションボタンを表示して、
ホバーしたら、背景もグラデーションにする、というcssを紹介します。

▼ホバー無し

▼ホバー時

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

これを実装するために、私が何をしたか、カンタンに説明すると。
まず、グラデーションの線を一発で実現できるミラクルなcssは今のところ無い!のです。
なので、疑似要素を使って実現しました。
beforeを下敷きに、afterを重ねるイメージです。

STEP1.htmlを記述

▼　まず、divとaでコーディング

	<div class="linkBtnWrap">
		<a class="linkBtn" href="">詳しく見る</a>
	</div>

▼今はこんな見た目

STEP2.CSSを使ってちょっとだけ整えます。

 a.linkBtn {
			padding: 15px 98px;
			color: #000;
			background: #fff;
			line-height: 1;
			font-size: 16px;
			font-weight: 100;
           　　text-decoration: none;
		}

▼今はこんな見た目。何も無い。

STEP3.疑似要素を使って、グラデーションを付ける

次は、本格的に見た目を整えます。
下図の様なイメージで、beforeとafterを重ね、after要素を少し小さく見せて、グラデーションの囲い線を表現します。

.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　はこんな見た目

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

ポイント　余白を持たせるためのスタイル指定

                    width: calc(100% - 10px);
					height: calc(100% - 10px);

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

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

▼今はこんな見た目。

STEP4.ホバーのcssを実装

上記のcssに、以下のcssを付け足します。

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

▼こんな見た目＆挙動になります。

さいごに

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