CSSでボタンが沈むように見えるコーディングを紹介！

LPを制作している際、ボタンデザインを作成するかと思います。

マウスオーバーした際ボタンを押したかのように沈むデザインを作成することで、クリック率が向上するかもしれません。

今回はボタンが沈むようなデザインをcssで実装する方法を紹介したいと思います。

ボタンデザインのコーディング

コーディングは下記のように記載します。

See the Pen rNWmjrP by takato (@ttakkatto) on CodePen.

HTMLの”お好きなリンク先を入力してください”というところで、リンク先のURLを入力することでクリック後にそのページに遷移することができます。

「文字入力」というところで、ボタン上に記載する文字を変更することができます。

cssの/*ボタンカラー*/というところでカラーコードを変更すると、ボタンの背景色が変更することができます。

その下のカラーコードは影の色の変更も可能です。

このようにコーディングすることで、まるでボタンを押したかのようなデザインを作成することができます。

クリックしたくなるようなボタンを作成したい場合は、ぜひ使用してみてください。