Buttonの使い方

Cheat sheet

各項目を選ぶことで、任意のボタンを作成できます。

HTML

<button class="">
Button
</button>

サンプル

Hover

ボタンにマウスカーソルを乗せたときに背景色を変えるには、hover:接頭辞をつけて背景色を指定します。

<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4">
Button
</button>

Rounded

ボタンの角を丸くするには、roundedクラスを指定します。

<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded">
Button
</button>
<button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded-full">
Button
</button>

Disabled

クリックできない無効なボタンにするには、次のクラスを指定します。

無効なボタンの視覚効果
クラス 説明
opacity-50 ボタンの背景色を薄くします。
cursor-not-allowed ボタンにマウスカーソルを乗せたとき、禁止を表わす形状にします。
<button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 opacity-50 cursor-not-allowed">
Button
</button>