UCPiaは札幌市を拠点として、ブランディングに必要な幅広い知識提供や写真撮影・ホームページ制作代行をしております

HTMLとCSSで作るおしゃれなボタンデザイン

HTMLとCSSで作るおしゃれなボタンデザイン

ボタンを作る上で大切なことは、
・ボタンだと認識させる
・押しやすい
の二つです。デザインがどんなに優れていても、上記の二つを満たしていなければ意味がありません。
本記事では、汎用的で使いやすいボタンのHTMLとCSSを公開しておりますので、コピペして自由にお使いください。

ボタンのデザイン(ベース)

See the Pen ボタンのデザイン(ベース) by ucpia (@ucpia) on CodePen.

冒頭にも述べたように、ボタンだと認識させるためにページ全体の背景色とボタンの背景や枠線の色が同化しないようにします。
パソコンではマウスをボタンにホバーさせた時に動きをつけることで、クリックできると認識させることも大切ですね。

また、クリックやタップしやすいように、高さと横幅は十分に確保しましょう。

これらを踏まえて、①を最も汎用的なボタンとしました。
コピペ後は、適宜クラス名や背景色、文字色を変えてください。

ボタンのデザイン(中抜き)

See the Pen ボタンのデザイン(中抜き) by ucpia (@ucpia) on CodePen.

枠に濃い色を付けて、背景に薄い色を敷くこともあります。
ベースのボタンに比べて重要度が低いボタンとして使用します。

ボタンのデザイン(グラデーション)

See the Pen ボタンのデザイン(グラデーション) by ucpia (@ucpia) on CodePen.

ボタンの背景色にグラデーションを採用しています。

ボタンのデザイン(角やや丸)

See the Pen ボタンのデザイン(角やや丸) by ucpia (@ucpia) on CodePen.

角を少しだけ丸くしましたが、印象は変わります。

ボタンのデザイン(角丸)

See the Pen ボタンのデザイン(角丸) by ucpia (@ucpia) on CodePen.

角をさらに丸くしたものです。

ボタンのデザイン(影)

See the Pen ボタンのデザイン(影) by ucpia (@ucpia) on CodePen.

マテリアルデザインが流行っているので、影をつけたボタンをよく目にするようになりました。

ボタンのデザイン(スタイリッシュ)

See the Pen ボタンのデザイン(スタイリッシュ) by ucpia (@ucpia) on CodePen.

やや汎用性に欠けますが、スタイリッシュなテーマであれば使いやすいと思います。

ボタンのデザイン(Neumorphism)

See the Pen ボタンのデザイン(Neumorphism) by ucpia (@ucpia) on CodePen.

流行っていた(流行っている?)ニューモーフィズムです。
視認性が悪いので、ボタンよりはコンテンツの背景として使用されます。ボタンとして使用するときは、文字よりもアイコンを使ったほうが良さそうです。

ボタンデザイン(ホバー1)

See the Pen ボタンのデザイン(ホバー1) by ucpia (@ucpia) on CodePen.

ホバー時のエフェクトはリンクだと認識させる手段の一つです。
色や影の変化も有効ですが、疑似要素を利用すると表現の幅が広がります。

ボタンデザイン(ホバー2)

See the Pen ボタンのデザイン(ホバー2) by ucpia (@ucpia) on CodePen.

上へ戻る