WEB制作

【コピペ可】カーソルが上にきた時にグイッっと沈むCSSボタンの作り方

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分下げるスタイルを指定します。

 

これで完成。

影を無くすことと、影の分ボタンの位置を下げることさえ覚えておけば、どんどん応用が可能です。

-WEB制作
-,

Copyright© 株式会社takeroot , 2021 All Rights Reserved Powered by takeroot.