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