以前、「カーソルが上にきた時にグイッっと沈むCSSボタンの作り方」という記事を書きまして、今回はそれの続きみたいな記事です。
テーマは立体感のあるボタン作りとなります。
今回作るボタンはこちら！例をご紹介
こちらが見本です。デザインがクソですが、一応、立体感がありますよね。
クリックしたときにペコンと凹むようにもなっているので、もし宜しければそちらもお試しください。（パソコンの方が分かりやすい）
立体過ぎるボタンはデザイン的にマイナスに思う方も多いですが、これくらいの立体感はいつの時代も重宝されますし、何といってもCTRは格段に上がります。
これは余談なので飛ばしてもらって結構ですが、皮肉なことに「イケてるデザインこそ収益性は下がる」というのは割と有名な話で、
ちょいダサのわかりやすい仕様・デザインこそが、最も収益性を上げるそうです。
楽◯やzoz◯のサイトが、お金持ってるクセにダサいのは、そういう理由からだとか...。
border-bottomとbox-shadowを組み合わせる
See the Pen MWazZVq by 砂田大樹 (@DAIKI-SUNADA) on CodePen.
クリックしたときの動作もCSSの方に書いているので、そちらもぜひご参考ください。
「:active」に、box-shadow:none;とposition:relative;を記載しているだけなので簡単です。
さて、本題の立体感ですが、私的にはやはりborder-bottomの使い方が肝だと思います。
通常、borderって細い線で使われることが多いですが、このように太めのborderを駆使することで、立体感を表現できるのです。
わかりますかね？
下の、色が濃くなっているところは、box-shadowによる影ではなく太いborder（5px）です。そしてその下の本当うっすい影の部分が、box-shadowとなります。
蛇足：ホバー時（カーソルが上に乗ったとき）に凹むようにしたい場合
記事はこれで終わりですが、余談というか蛇足として、ホバー時に凹むようにするにはどうするべきかを書いておきましょう。
答えは、:activeを:hoverへ変換するだけです。
:activeがクリック時のスタイル指定、:hoverはホバー時のスタイル指定と覚えておけば様々な応用に生かせると思います。
短かったですが、以上です。
