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

ボタンコンポーネント

ポートフォリオのダークモードをサポートするレスポンシブボタンコンポーネント。適度な複雑さのグレースケールのミニマリストフラットデザインが特徴です。

プレビュー

HTMLコード 

<div class="flex flex-col items-center justify-center gap-4 p-8 bg-gray-100 dark:bg-gray-900 min-h-screen">

  <!-- Primary Button -->
  <button class="px-6 py-3 text-lg font-semibold text-white bg-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-400">
    Primary Action
  </button>

  <!-- Secondary Button -->
  <button class="px-6 py-3 text-lg font-semibold text-gray-800 bg-transparent border-2 border-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:text-gray-200 dark:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-900 dark:focus:ring-gray-400">
    Secondary Action
  </button>

  <!-- Tertiary Button (Icon only example) -->
  <button class="flex items-center justify-center w-12 h-12 text-gray-800 bg-transparent border-2 border-gray-800 rounded-full shadow-md transition duration-300 ease-in-out hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:text-gray-200 dark:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-900 dark:focus:ring-gray-400">
    <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
    </svg>
  </button>

  <!-- Responsive Example (adjusts layout on larger screens) -->
  <div class="flex flex-col md:flex-row items-center justify-center gap-4 w-full">
    <button class="w-full md:w-auto px-6 py-3 text-lg font-semibold text-white bg-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-700 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:bg-gray-200 dark:text-gray-900 dark:hover:bg-gray-300 dark:focus:ring-gray-400">
      Responsive Button 1
    </button>
    <button class="w-full md:w-auto px-6 py-3 text-lg font-semibold text-gray-800 bg-transparent border-2 border-gray-800 rounded-md shadow-md transition duration-300 ease-in-out hover:bg-gray-800 hover:text-white focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-opacity-50 dark:text-gray-200 dark:border-gray-200 dark:hover:bg-gray-200 dark:hover:text-gray-900 dark:focus:ring-gray-400">
      Responsive Button 2
    </button>
  </div>

</div>

関連コンポーネント

ニューモーフィズムソーシャルメディアボタン

ソーシャルメディアインターフェイス用のシンプルなNeumorphismスタイルのボタンコンポーネントで、レスポンシブデザインとTailwind CSSを使用したダークモードのサポートを特長としています。このボタンは、類似の配色と微妙な影を使用して、柔らかく押し出された外観を作り出します。

開ける

Glassmorphism Buttons コンポーネント

ダークモードのレスポンシブポートフォリオサイトのためのアーストーンを使用したGlassmorphismボタン

開ける

遊び心のあるエンターテイメントボタン

エンターテインメントまたはメディアプラットフォーム向けに設計された遊び心のある楽しいボタンのセットで、落ち着いた/彩度の低い色と丸みを帯びた要素が特徴です。レスポンシブで、ダークモードのサポートが含まれています。

開ける