Botón de seguimiento de glassmorphism
Un botón de seguimiento responsivo con diseño de Glassmorphism, soporte de modo oscuro, usando Tailwind CSS.
Código 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>Componentes relacionados
Componente del botón Seguir
Un componente complejo del botón de seguimiento diseñado con un efecto de morfismo de vidrio, utilizando un esquema de color complementario, adecuado para aplicaciones de comercio electrónico, con diseño receptivo y soporte de tema oscuro.
Botón de seguimiento de glassmorphism
Componente de botón de seguimiento de Glassmorphism para redes sociales con tema oscuro
Componente del botón de seguimiento neumórfico
Un componente complejo del botón de seguimiento de estilo neumórfico con tonos atardeceres/cálidos, diseñado para plataformas inmobiliarias. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro, lo que hace que los elementos parezcan sobresalir del fondo mediante sombras sutiles.