サイト制作のたびに悩みがちな「ボタンデザイン」。
今回は私が実際のWEB制作でよく使っている、汎用性の高いボタンデザインを3つご紹介します。
サイトのデザインに合わせて使い分けることで、雰囲気を損なうことなく自然に馴染ませることができます。
どれもコピペでそのまま使えるように調整しているので、ちょっとしたスパイスが欲しいときにぜひ役立ててください。
背景が伸びる矢印ボタン
どんなサイトにも合う、シンプルで主張しすぎないボタンです。
主張は控えめだけど、訪問者にとってはちゃんと「押したくなる」デザインです。
See the Pen 背景が伸びる矢印ボタン by はなはな氏 (@wxftomuu-the-selector) on CodePen.
背景ずらしボタン
背景にずらし効果を加えることで、ちょっとしたおしゃれ感と、ふんわり温かみのある雰囲気を演出しています。
保育園やカフェなど、親しみやすさを大切にしたサイトにぴったりです。
See the Pen 背景ずらしボタン by はなはな氏 (@wxftomuu-the-selector) on CodePen.
回転して文字が変わるボタン
カチッとした雰囲気にも合う、遊び心あるボタンです。
フォーマルな印象の中に「遊び心」を足したいときにぴったりです。
See the Pen 回転して文字が変わるボタン by はなはな氏 (@wxftomuu-the-selector) on CodePen.
まとめ
ボタンひとつで、サイトの印象は大きく変わります。
今回ご紹介した3つのボタンは、さまざまなテイストのサイトに自然となじむ、汎用性の高いデザインです。
すべてコピペで簡単に使えるので、ご自身のサイトに合わせて活用いただき、より魅力的なUIづくりにお役立ていただければ幸いです。
また弊社では、サイトの運営に手が回らない方のために、更新代行作業も承っております。
「ちょっとした修正だけお願いしたい」といったご相談にも柔軟に対応しておりますので、お困りの際はぜひお気軽にご相談ください。
この記事が少しでも皆さまのお役に立てば幸いです。最後までお読みいただき、ありがとうございました。
