Компоненты Кнопки Компонент кнопок стекломорфизма

Компонент кнопок стекломорфизма

Простой, отзывчивый компонент кнопки Glassmorphism с поддержкой пастельных тонов и темного режима с использованием Tailwind CSS.

Предварительный просмотр

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>

Связанные компоненты

Компонент кнопок

Минималистичный компонент кнопок, разработанный с помощью Tailwind CSS, с адаптивными эффектами и поддержкой темных тем.

Открытый

Компонент кнопок

Минималистичный компонент кнопок, предназначенный для портфолио, демонстрирующего работу или продукты, с яркими цветами и адаптивным дизайном с поддержкой темных тем с использованием Tailwind CSS.

Открытый

Компонент кнопок

Кнопки в стиле Material Design с цветовой схемой в оттенках серого для портфолио, отличающиеся адаптивным дизайном и поддержкой темных тем.

Открытый