cssにて簡単なボタンを作成できるようになると、次に作りたくなるのが、「動きのあるボタン」だと思います。
今回はその中でも比較的簡単に作ることのできる、「カーソルをボタンの上に載せたときにグイッと沈むボタン」を作っていきます。いわゆるホバーアクションのあるボタンということです。ぜひご参考ください。
今回作るボタンはこちら！例をご紹介
まずは見本ですが、下記ボタンが今回作成するものです。
スマホではイマイチ分からないと思うので、一度、パソコンでご覧ください。
カーソルを上に載せたときに、グイッと沈むことを確認できると思います。
ちょっとした動作に見えますが、これによりクリック率は格段に上がるので、余裕がある場合は付け足すことをおすすめします。
作り方は簡単！:hover（擬似クラス）に動作（スタイル）を指定
See the Pen Yzyaoge by 砂田大樹 (@DAIKI-SUNADA) on CodePen.
カーソルがボタンの上に乗った（ホバー）ときに動作を加えるだけなので、擬似クラスである「:hover」を使います。
今回であれば、クラス名が「.btn-sink」なので、通常、.btn-sink{}と書きたいところですが、その間に:hoverを追加してください。これにより、ホバー時に指定スタイルが適用されます。
例：.btn-sink:hover{}
考え方は、「影を無くし影の分、位置を下げる」
「沈む」といっても、今回はアニメーションではなく、「通常＝指定スタイルを適用しない」「ホバー時＝指定スタイルを適用する」といった単調なものです。
なので考え方もシンプルです。
まず下記ボタンに、影が下方向へ4px分ついていることを確認してください。
ボタンが沈むということは、まずこの影を無くさなくてはなりません。
なので、:hoverに「box-shadow:none;」を指定します。これで「ホバー時＝影がない」となります。
これだけでも若干沈んだようには見えるのですが、さらに下方向へボタンの位置を下げてみましょう。
今回であれば、元々4pxの影が付いているので、「position:relative;」を使い、ホバー時に4px分下げるスタイルを指定します。
これで完成。
影を無くすことと、影の分ボタンの位置を下げることさえ覚えておけば、どんどん応用が可能です。
