<div class="flex flex-wrap items-center justify-center min-h-screen p-10 bg-gray-200 dark:bg-gray-800">
<!-- Primary Button -->
<button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-purple-700 dark:text-purple-300 bg-gradient-to-br from-purple-300 to-purple-500 dark:from-purple-800 dark:to-purple-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
Primary Action
</button>
<!-- Secondary Button -->
<button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-pink-700 dark:text-pink-300 bg-gradient-to-br from-pink-300 to-pink-500 dark:from-pink-800 dark:to-pink-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
Secondary Action
</button>
<!-- Success Button -->
<button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-green-700 dark:text-green-300 bg-gradient-to-br from-green-300 to-green-500 dark:from-green-800 dark:to-green-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
Action Success
</button>
<!-- Warning Button -->
<button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-yellow-700 dark:text-yellow-300 bg-gradient-to-br from-yellow-300 to-yellow-500 dark:from-yellow-800 dark:to-yellow-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
Action Warning
</button>
<!-- Danger Button -->
<button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-red-700 dark:text-red-300 bg-gradient-to-br from-red-300 to-red-500 dark:from-red-800 dark:to-red-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
Action Danger
</button>
<!-- Icon Button -->
<button class="m-4 p-5 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-2xl text-blue-700 dark:text-blue-300 bg-gradient-to-br from-blue-300 to-blue-500 dark:from-blue-800 dark:to-blue-900 transition-all duration-300 hover:shadow-neumorphic-pressed-light hover:dark:shadow-neumorphic-pressed-dark">
<svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-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>
<!-- Disabled Button Example (add `pointer-events-none opacity-50` for real disabling) -->
<button class="m-4 px-8 py-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark text-lg font-semibold text-gray-500 dark:text-gray-400 bg-gradient-to-br from-gray-300 to-gray-400 dark:from-gray-700 dark:to-gray-800 cursor-not-allowed">
Disabled
</button>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 8px 8px 16px #a3b1c6, -8px -8px 16px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 8px 8px 16px #4d4d4d, -8px -8px 16px #333333;
}
.shadow-neumorphic-pressed-light {
box-shadow: inset 6px 6px 12px #a3b1c6, inset -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-pressed-dark {
box-shadow: inset 6px 6px 12px #4d4d4d, inset -6px -6px 12px #333333;
}
</style>
