Componente del botón Seguir
Un botón "Seguir" limpio y minimalista diseñado con una paleta de colores retro/vintage, adecuado para un panel de control o una página de perfil. Cuenta con un estado de desplazamiento interactivo y soporte para el modo oscuro, que incorpora los principios de tipografía suizos/internacionales.
Código HTML
<div class="p-4 sm:p-6 bg-rose-50 dark:bg-zinc-800 rounded-lg shadow-md max-w-sm mx-auto font-sans">
<div class="flex flex-col items-center space-y-4">
<img class="w-20 h-20 rounded-full object-cover border-2 border-indigo-400 dark:border-indigo-600" src="https://randomuser.me/api/portraits/women/44.jpg" alt="User Avatar">
<div class="text-center">
<p class="text-lg font-semibold text-zinc-800 dark:text-zinc-100">Jane Doe</p>
<p class="text-sm text-zinc-600 dark:text-zinc-400">@janedoe_official</p>
</div>
<button class="px-6 py-2 rounded-full border-2 border-indigo-500 bg-indigo-400 text-white font-bold text-sm tracking-wide uppercase shadow-md
hover:bg-indigo-500 hover:border-indigo-600 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2
dark:bg-indigo-600 dark:border-indigo-700 dark:hover:bg-indigo-700 dark:focus:ring-offset-zinc-800
transition duration-300 ease-in-out">
Follow
</button>
</div>
</div>Componentes relacionados
Diseño de materiales Botón de seguimiento
Un componente de botón de seguimiento de Material Design monocromático y receptivo para blogs, con soporte para modo 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.
Componente del botón Seguir
Un componente de botón de seguimiento responsivo diseñado con los principios de Material Design, con soporte para el modo oscuro y estilos personalizados con Tailwind CSS.