Neumorphic Buttons コンポーネント
レスポンシブ効果と Tailwind CSS を使用したダーク テーマのサポートを備えたニューモーフィック デザイン スタイルを特徴とするボタン コンポーネント。
HTMLコード
<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<h2 class="mb-4 text-2xl font-bold dark:text-white">Neumorphic Buttons</h2>
<div class="flex space-x-4">
<button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
<span class="text-gray-900 dark:text-gray-200">Button 1</span>
<div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
</button>
<button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
<span class="text-gray-900 dark:text-gray-200">Button 2</span>
<div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
</button>
<button class="relative group p-4 bg-white dark:bg-gray-800 rounded-lg shadow-md transition-all duration-300 ease-in-out hover:shadow-lg hover:-translate-y-1 active:translate-y-0 active:shadow-md">
<span class="text-gray-900 dark:text-gray-200">Button 3</span>
<div class="absolute inset-0 rounded-lg bg-gray-200 dark:bg-gray-700 blur-md shadow-lg opacity-30 group-hover:opacity-20 transition-opacity duration-300"></div>
</button>
</div>
</div>
関連コンポーネント
ボタンコンポーネント
紙/印刷物にインスパイアされたグレースケールデザインのシンプルで応答性の高いボタンコンポーネントは、教育プラットフォームに適しており、ライトモードとダークモードをサポートします。
Retro_Rainbow_Buttons_Component
写真ギャラリーやポートフォリオ向けにデザインされたレトロをテーマにしたグラデーションレインボーボタンのコレクションで、適度な複雑さと完全な応答性、ダークモードのサポートを備えています。
ボタンコンポーネント
作品や製品を紹介するポートフォリオ用に設計されたミニマリストボタンコンポーネントで、鮮やかな色とレスポンシブデザイン、Tailwind CSSを使用したダークテーマのサポートが特徴です。