ボタンデザインやコーディングでどうCSSを書いていいか悩むことありませんか?
実用性重視だけどおしゃれなボタンのコードスニペット集をつくりました!
UI/UXの観点からどんなボタンが最適であるべきか解説つき!もちろんコピペで今すぐ使えます。
![](/static/069bc468dd96c224d5c16811d36dce60/e39a3/camille-pic.jpg)
かみーゆ/フロントエンドエンジニア
ボタンを実装する上でUX/UI上重要な3つのポイント
ボタンのデザインでボタンのデザインでユーザーのことを考えて大切にしてことがあります。
1、サイズは適切か
スマホの時サイズが小さすぎるとタップできません。 縦横のサイズが44px以上(Googleの推奨サイズ) というのが鉄板です。
2、クリックできそうか
デザインとしてクリックできそうか、がポイントです。
形としてボタンっぽかったらなおわかりやすいかと思います。
よくあるボタンデザインがこんな感じです。
たとえばこんなオレンジのボタンがあるとします。
![pointer-events](/static/18dbf46079b5a54f770a03094c6ff162/cccdc/entry396-1.png)
※ コンバージョン率が高いと言われているのであえてオレンジを使っています。
アイコン、文字をのせたらもうボタンって何と無くわかりますよね?
ユーザーに「なんかクリックできそう」って思わせるのがポイントです。
3、他のパーツと差別化できているか
ウェブサイトではとくにCVボタンなどであれば、クリックされる事が重要なポイント。
他のパーツ(コンテンツ)との差別化をしっかりしておく必要があります。
ベーシックなボタンのコード3つ
まずはベーシックなボタンのコードをご紹介します。
![pointer-events](/static/7f46e340a3d43bf064ac96d147339a15/90cbd/entry396-2.png)
この3つレパートリーを持っていればとりあえずどうにかなります。多分。
よくある続きを読むボタンですね。
今回右に配置したアイコンは「Material Design Iconic Font」を使っています。
Flexを使って、文字とアイコンを縦横均等に配置してます。
pointer-events の使い方と使いどころ
パーツでいえばページネーションや、COMING SOONにしてリンクが貼れないバナーなどに使うことが多めです。
CMSから吐き出すタグを自分では書き換えられないけどCSS側でクリックを禁止したい