プライマリ、セカンダリ、アクセント、ゴースト、アウトライン、ソフト バリアントを備えた CSS のみの Tailwind CSS ボタン。サイズ xs ～ xl、読み込み状態、無効、およびアイコン ボタン。 CSS のみの WCAG AA は、Django、HTMX、Laravel、React で動作します。
ボタン コンポーネントは、アクションをトリガーしたり、ユーザーを新しいページに移動したりするインタラクティブな要素です。 Frutjam ボタン システムは、修飾子クラスを通じて複数のサイズ、色、スタイルを提供します。これらはすべて、フレームワークやプロジェクト間でシームレスに動作する、軽量で高度にカスタマイズ可能なボタンに対する Tailwind CSS ユーティリティ ファーストのアプローチで構築されています。
CSS のみ。JavaScript は必要ありません。 WCAG AA にアクセス可能で、フレームワークに依存しない - Django、HTMX、Laravel、React、およびあらゆるスタックで動作します。
| クラス | タイプ | 説明 |
|---|---|---|
| btn | ベース | スタイル付きのボタン要素 |
| btn-outline | スタイル | 色付きの境界線を持つ透明な塗りつぶし |
| btn-soft | スタイル | 落ち着いた色合いの背景 |
| btn-ghost | スタイル | ホバーしたときにのみ表示される微妙な背景 |
| btn-dashed | スタイル | 破線の境界線スタイル |
| btn-plain | スタイル | 背景や枠線なし、テキストのみ |
| btn-link | スタイル | テキストハイパーリンクとしてスタイル設定 |
| btn-pill | スタイル | 完全に丸い錠剤の形状 |
| btn-rounded | スタイル | 適度な丸め |
| btn-circle | スタイル | アイコンボタンの等幅円 |
| btn-square | スタイル | 丸みのない四角い形状 |
| btn-block | 修飾子 | 全角ブロックボタン |
| btn-wide | 修飾子 | デフォルトよりも幅が広く、水平方向のパディングが追加されています |
| btn-active | 修飾子 | アクティブ/押されたビジュアル状態を強制します |
| btn-disabled | 修飾子 | ボタン以外の要素の外観を無効にする |
| btn-xs | サイズ | 極小 |
| btn-sm | サイズ | 小さい |
| btn-md | サイズ | 中 (デフォルト) |
| btn-lg | サイズ | 大きい |
| btn-xl | サイズ | 特大 |
| btn-2xl | サイズ | 特大×2 |
| btn-primary | 色 | 主要なテーマカラー |
| btn-secondary | 色 | 二次テーマカラー |
| btn-accent | 色 | アクセントのテーマカラー |
| btn-neutral | 色 | ニュートラルなテーマカラー |
| btn-info | 色 | 情報セマンティックカラー |
| btn-success | 色 | 成功のセマンティックカラー |
| btn-warning | 色 | 警告セマンティックカラー |
| btn-error | 色 | エラー セマンティック カラー |
基本的な使い方
<button class="btn">Button</button> |
<button className="btn">Button</button> |
ボタンのサイズ
html
1 2 3 4 5 6 | <button class="btn btn-xs">Xsmall</button> <button class="btn btn-sm">Small</button> <button class="btn btn-md">Medium</button> <button class="btn btn-lg">Large</button> <button class="btn btn-xl">Xlarge</button> <button class="btn btn-2xl">2XLarge</button> |
ボタンの色
html
1 2 3 4 5 6 7 8 9 | <button class="btn">Default</button> <button class="btn btn-primary">Primary</button> <button class="btn btn-secondary">Secondary</button> <button class="btn btn-accent">Accent</button> <button class="btn btn-info">Info</button> <button class="btn btn-success">Success</button> <button class="btn btn-warning">Warning</button> <button class="btn btn-error">Error</button> <button class="btn btn-neutral">Neutral</button> |
ボタンのスタイル
ソフトボタン
html
1 2 3 4 5 6 7 8 9 | <button class="btn btn-soft">Default</button> <button class="btn btn-primary btn-soft">Primary</button> <button class="btn btn-secondary btn-soft">Secondary</button> <button class="btn btn-accent btn-soft">Accent</button> <button class="btn btn-info btn-soft">Info</button> <button class="btn btn-success btn-soft">Success</button> <button class="btn btn-warning btn-soft">Warning</button> <button class="btn btn-error btn-soft">Error</button> <button class="btn btn-neutral btn-soft">Neutral</button> |
破線のボタン
html
1 2 3 4 5 6 7 8 9 | <button class="btn btn-dashed">Default</button> <button class="btn btn-dashed btn-primary">Primary</button> <button class="btn btn-dashed btn-secondary">Secondary</button> <button class="btn btn-dashed btn-accent">Accent</button> <button class="btn btn-dashed btn-info">Info</button> <button class="btn btn-dashed btn-success">Success</button> <button class="btn btn-dashed btn-warning">Warning</button> <button class="btn btn-dashed btn-error">Error</button> <button class="btn btn-dashed btn-neutral">Neutral</button> |
アウトラインボタン
html
1 2 3 4 5 6 7 8 9 | <button class="btn btn-outline">Default</button> <button class="btn btn-outline btn-primary">Primary</button> <button class="btn btn-outline btn-secondary">Secondary</button> <button class="btn btn-outline btn-accent">Accent</button> <button class="btn btn-outline btn-info">Info</button> <button class="btn btn-outline btn-success">Success</button> <button class="btn btn-outline btn-warning">Warning</button> <button class="btn btn-outline btn-error">Error</button> <button class="btn btn-outline btn-neutral">Neutral</button> |
ゴーストボタン
html
1 2 3 4 5 6 7 8 9 | <button class="btn-ghost btn">Default</button> <button class="btn btn-ghost btn-primary">Primary</button> <button class="btn btn-ghost btn-secondary">Secondary</button> <button class="btn btn-ghost btn-accent">Accent</button> <button class="btn btn-ghost btn-info">Info</button> <button class="btn btn-ghost btn-success">Success</button> <button class="btn btn-ghost btn-warning">Warning</button> <button class="btn btn-ghost btn-error">Error</button> <button class="btn btn-ghost btn-neutral">Neutral</button> |
リンクボタン
html
1 2 3 4 5 6 7 8 9 | <button class="btn btn-link">Default</button> <button class="btn btn-primary btn-link">Primary</button> <button class="btn btn-secondary btn-link">Secondary</button> <button class="btn btn-accent btn-link">Accent</button> <button class="btn btn-info btn-link">Info</button> <button class="btn btn-success btn-link">Success</button> <button class="btn btn-warning btn-link">Warning</button> <button class="btn btn-error btn-link">Error</button> <button class="btn btn-neutral btn-link">Neutral</button> |
ボタンの形状
丸ボタン
html
1 2 3 | <button class="btn btn-circle"> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"/><path d="M4 8l16 0" /><path d="M4 16l16 0" /></svg> </button> |
丸いボタン
html
1 2 3 4 5 | <button class="btn btn-error btn-rounded" aria-label="Remove from favorites"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="18" height="18"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"></path> </svg> </button> |
四角ボタン
html
1 2 3 4 5 | <button class="btn btn-primary btn-square" aria-label="Add to favorites"> <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2.5" stroke="currentColor" width="18" height="18"> <path stroke-linecap="round" stroke-linejoin="round" d="M21 8.25c0-2.485-2.099-4.5-4.688-4.5-1.935 0-3.597 1.126-4.312 2.733-.715-1.607-2.377-2.733-4.313-2.733C5.1 3.75 3 5.765 3 8.25c0 7.22 9 12 9 12s9-4.78 9-12Z"></path> </svg> </button> |
ピルボタン
html
1 2 3 | <button class="btn btn-primary btn-pill"> Pill button </button> |
ボタンの状態
アクティブなボタン
html
1 2 3 4 5 6 7 8 9 | <button class="btn btn-active">Default</button> <button class="btn btn-primary btn-active">Primary</button> <button class="btn btn-secondary btn-active">Secondary</button> <button class="btn btn-accent btn-active">Accent</button> <button class="btn btn-info btn-active">Info</button> <button class="btn btn-success btn-active">Success</button> <button class="btn btn-warning btn-active">Warning</button> <button class="btn btn-error btn-active">Error</button> <button class="btn btn-neutral btn-active">Neutral</button> |
無効化ボタン
html
1 2 3 4 | <button type="button" class="btn btn-primary" disabled="disabled">Disabled using attribute</button> <button type="button" class="btn btn-primary btn-disabled" tabindex="-1" role="button" aria-disabled="true"> Disabled using class name </button> |
ボタンの幅
ワイドボタン
html
<button class="btn btn-primary btn-wide">Wide</button> |
ブロックボタン
html
<button class="btn btn-primary btn-block">Block</button> |
ボタンタグの柔軟性
html
1 2 3 4 5 6 7 | <input type="button" value="Input" class="btn btn-primary"> <input type="submit" value="Submit" class="btn btn-primary"> <input type="radio" aria-label="Radio" class="btn btn-primary"> <input type="checkbox" aria-label="Checkbox" class="btn btn-primary"> <input type="reset" value="Reset" class="btn btn-primary"> <button type="submit" class="btn btn-primary">Button</button> <a role="button" class="btn btn-primary">Link</a> |
Claude コード、Cursor、または別の AI エディターを使用していますか?
Cherry MCP は、AI エディタに正確な ボタン クラス名と構造をオンデマンドで提供します。もう幻覚のような授業はありません。