[Tailwind CSS] ボタンUI

はじめに

この記事では、Tailwind CSS でよくあるボタンデザインを作成しました。

下記サイトを活用して表示しております。

参考資料

1. 「登録」のボタン

<button class="py-1 px-5 bg-sky-500 rounded-2xl text-white font-black">
  登録
</button>

工夫ポイント

1. プライマリーカラーなど色を使用することで、この後にイベントが発生することをイメージさせる
2. 文字を白色にすることで、見やすさとテキストではないことを強調させる
3. ボタンの角を丸くすることで、ボタンらしさを強調させる

2. 「削除」のボタン

<button class="py-1 px-5 bg-red-500 rounded-2xl text-white font-black">
  削除
</button>

工夫ポイント

1. 警告カラーを使用することで、この後に重大なイベントが発生することをイメージさせる
2. 文字を白色にすることで、見やすさとテキストではないことを強調させる
3. ボタンの角を丸くすることで、ボタンらしさを強調させる

3. 「戻る」のボタン

<button class="py-1 px-5 bg-gray-100/50 border rounded-2xl">戻る</button>

工夫ポイント

1. これまでのボタンと異なりグレーを使用することで、この後に無害なイベントが発生することをイメージさせる
2. ボタンの角を丸くすることで、ボタンらしさを強調させる

YouTube のご案内

ポモドーロタイマー（25 分勉強＋ 5 分休憩）を活用した作業・勉強配信を行っています。
集中したいときや、誰かと一緒に頑張りたいときに、ぜひご活用ください。

ご興味のある方は、ぜひお気軽に遊びに来てください！
「Zenn から来ました!!」とコメントを貰えると泣いて喜びます 🤣