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

ボタンコンポーネント

マテリアルデザインでスタイリングされたシンプルなボタンコンポーネントで、単色の配色を使用し、ダークモードをサポートし、ビジネス/企業のWebサイトに適しています。

プレビュー

HTMLコード 

<div class="flex flex-col items-center space-y-4 p-6 bg-gray-100 dark:bg-gray-800">
    <h2 class="text-lg font-bold text-gray-800 dark:text-gray-200">Buttons Component</h2>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Primary Button</button>
        <button class="px-6 py-2 rounded border border-blue-600 text-blue-600 hover:bg-blue-600 hover:text-white dark:border-blue-800 dark:text-blue-200 dark:hover:bg-blue-800 dark:hover:text-white">Secondary Button</button>
    </div>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-gray-300 text-gray-800 hover:bg-gray-400 dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">Tertiary Button</button>
        <button class="px-6 py-2 rounded bg-transparent border border-gray-300 text-gray-800 hover:bg-gray-300 dark:border-gray-700 dark:text-gray-200 dark:hover:bg-gray-700">Outlined Button</button>
    </div>
    <div class="flex space-x-4">
        <button class="px-6 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Large Button</button>
        <button class="px-4 py-2 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Medium Button</button>
        <button class="px-2 py-1 rounded bg-blue-600 text-white hover:bg-blue-500 dark:bg-blue-800 dark:hover:bg-blue-700">Small Button</button>
    </div>
</div>

関連コンポーネント

3D_Business_Buttons_Component

企業のWebサイトに適した、温かみのある夕焼けの配色を備えた3Dスタイルのビジネスボタンのレスポンシブセット。ダークモードのサポートとインタラクティブなホバー効果が含まれています。

開ける

Glassmorphism Buttons コンポーネント

パステルカラーとTailwind CSSを使用したダークモードをサポートする、シンプルでレスポンシブなGlassmorphismボタンコンポーネント。

開ける

ボタンコンポーネント

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

開ける