[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. ボタンの角を丸くすることで、ボタンらしさを強調させる