Tailwind CSSで使うボタンのデザインツールです。スライダーやオプションを調整するだけで、プレビューを見ながらオリジナルのボタンをデザインできます。グラデーション、枠線、アイコン、ホバー設定も自由自在。デザインが完成したら、コピペ用コードをワンクリックで生成できます。
Tailwind CSS ボタンジェネレーター|見て・触って作るコピペ用コード
この記事はPRを含みます。

基本設定
py-2
px-4
スタイル
フォント
#ffffff
アイコン
状態 & エフェクト
背景
2px
#4f46e5
#4f46e5
注: カラーピッカーはカスタム色を生成します。Tailwindの標準色名(例: `bg-blue-500`)を使いたい場合は、コードを手動で編集してください。
#a855f7
プレビュー
生成されたコード
サンプルから選ぶ
クリックすると、デザインがコントローラーに読み込まれます。
標準 (Solid)
グラデーション
アウトライン + アイコン
ピル (Pill)
無効 (Disabled)
ソフト (Soft)
危険 (Outline Red)
CTA (アイコン右)
アイコンのみ
ゴースト (Gray)
ダークモード
アニメ (Pulse)


























