Компонент кнопок стекломорфизма
Простой, отзывчивый компонент кнопки 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>Связанные компоненты
Неоновые пуговицы в стиле ар-деко
Простые, отзывчивые компоненты кнопок в геометрическом стиле ар-деко и яркой неоново-электрической цветовой гамме, подходящие для применения в здравоохранении. Включает поддержку темного режима.
Игривые кнопки для развлечений
Набор игривых и забавных кнопок, разработанных для развлекательной или медиа-платформы, с приглушенными/ненасыщенными цветами и закругленными элементами. Адаптивный и включает поддержку темного режима.
Неоморфизм кнопок социальных сетей
Простой компонент кнопки в стиле Neumorphism для интерфейсов социальных сетей, отличающийся адаптивным дизайном и поддержкой темного режима с использованием Tailwind CSS. Кнопка использует цветовую схему «Аналоговый» и тонкие тени для создания мягкого вытянутого вида.