Кнопка следования за стекломорфизмом
Отзывчивая кнопка подписки с дизайном Glassmorphism, поддержкой темного режима, использованием Tailwind CSS.
HTML-код
<template>
<button class="relative inline-flex items-center justify-center p-0.5 mb-2 me-2 overflow-hidden text-sm font-medium text-gray-900 rounded-lg group bg-gradient-to-br from-purple-600 to-blue-500 group-hover:from-purple-600 group-hover:to-blue-500 hover:text-white dark:text-white focus:ring-4 focus:outline-none focus:ring-blue-300 dark:focus:ring-blue-800">
<span class="relative px-5 py-2.5 transition-all ease-in duration-75 bg-white dark:bg-gray-900 rounded-md group-hover:bg-opacity-0 backdrop-filter backdrop-blur-lg bg-opacity-20">
Follow
</span>
</button>
</template>Связанные компоненты
Компонент кнопки «Следовать»
Сложный, вдохновленный бумагой и печатью компонент кнопки «Подписаться» для игровых веб-сайтов с черно-белым монохромным дизайном и ярким акцентным цветом, оптимизированным для отзывчивости и темного режима.
Компонент кнопки "Следовать" - моноширинный/стиль разработчика
Сложный, интерактивный компонент кнопки подписки, разработанный для новостных/журналистских веб-сайтов, отличается моноширинной/девелоперской эстетикой с цветами драгоценных тонов и полной отзывчивостью, включая поддержку темного режима.
Кнопка «Подписаться» в Material Design
Отзывчивый, монохроматический компонент кнопки подписки Material Design для блогов с поддержкой темного режима.