CCHub Logo CCHub Tailwind Collection
コンポーネント ボタン ボタンコンポーネント

ボタンコンポーネント

マテリアルデザイン、トライアドカラースキーム、ダークテーマをサポートするレスポンシブボタンコンポーネント。

プレビュー

HTMLコード 

<div class="flex flex-wrap gap-4 p-4 bg-white dark:bg-gray-800">
  <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-blue-700 dark:hover:bg-blue-900 transition duration-300 ease-in-out">Primary Button</button>
  <button class="bg-green-500 hover:bg-green-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-green-700 dark:hover:bg-green-900 transition duration-300 ease-in-out">Secondary Button</button>
  <button class="bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-red-700 dark:hover:bg-red-900 transition duration-300 ease-in-out">Danger Button</button>
  <button class="bg-yellow-500 hover:bg-yellow-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-yellow-700 dark:hover:bg-yellow-900 transition duration-300 ease-in-out">Warning Button</button>
  <button class="bg-purple-500 hover:bg-purple-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-purple-700 dark:hover:bg-purple-900 transition duration-300 ease-in-out">Info Button</button>
  <button class="bg-gray-500 hover:bg-gray-700 text-white font-bold py-2 px-4 rounded shadow-lg dark:bg-gray-700 dark:hover:bg-gray-900 transition duration-300 ease-in-out">Neutral Button</button>
</div>

関連コンポーネント

ボタンコンポーネント

CRM/Business Tools アプリケーション用のインタラクティブ ボタンのセットで、マイクロインタラクション、ジュエル トーン カラー、ダーク モードをサポートする完全な応答性を備えています。

開ける

Brutalism Buttons コンポーネント

ブルータリズムデザインのボタンコンポーネントで、高彩度の色、レスポンシブレイアウト、ダークモードのサポートが特徴で、ビジネスや企業のWebサイトに適しています。

開ける

アールデコ調の不動産ボタンコンポーネント

アールデコ調の複雑な不動産プラットフォーム用ボタンコンポーネントで、幾何学模様、豪華なグレースケールスタイル、複数のインタラクティブ要素を備え、完全な応答性とダークモードをサポートしています。

開ける