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

Glassmorphism Buttons コンポーネント

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

プレビュー

HTMLコード 

<div class="flex items-center justify-center h-screen bg-gray-200 dark:bg-gray-800">
  <div class="flex space-x-4">
    <button class="px-6 py-3 text-lg font-semibold text-white bg-pink-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-pink-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
      Button 1
    </button>
    <button class="px-6 py-3 text-lg font-semibold text-white bg-blue-300 rounded-lg shadow-lg backdrop-filter backdrop-blur-lg bg-opacity-20 hover:bg-opacity-40 transition duration-200 ease-in-out dark:bg-blue-500 dark:bg-opacity-30 dark:hover:bg-opacity-50">
      Button 2
    </button>
  </div>
</div>

関連コンポーネント

ボタンコンポーネント

グレースケールの配色を備えたミニマリスト/フラットデザインのボタンコンポーネント。ビジネス/企業のWebサイトに適しており、一部のインタラクティブ機能を備えた適度な複雑さを備えています。レスポンシブで、Tailwind CSSを使用したダークテーマをサポートしています。

開ける

ボタンコンポーネント

ポートフォリオ用に設計されたインタラクティブボタンのセットで、マイクロインタラクション、補色配色、ダークモードサポートによる完全な応答性を備えています。

開ける

ボタンコンポーネント

レトロビンテージをテーマにしたボタンコンポーネントで、トライアドの配色、シンプルな複雑さ、ダークモードをサポートするレスポンシブデザインで、ブログやコンテンツWebサイトに適しています。

開ける