Components Buttons Glassmorphism Buttons Component

Glassmorphism Buttons Component

A simple, responsive Glassmorphism button component with Pastel colors and dark mode support using Tailwind CSS.

Preview

HTML Code

<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>

Related Components

Material Design Buttons Component

Material Design Buttons Component in Earth Tones for Social Media

Open

Neumorphism Buttons Component

A complex Neumorphism-styled button component with vibrant colors, responsive design, and dark mode support, suitable for business/corporate websites.

Open

Buttons Component

A minimalist button component for dashboards, with support for responsive design and dark theme.

Open