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
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.
Componente del botón de seguimiento de Cyberpunk
Un complejo componente de botón "Seguir" de temática cyberpunk para herramientas de CRM/negocios, con una paleta de colores bosque/verde, fondos oscuros y acentos de neón brillantes, con capacidad de respuesta total y compatibilidad con el modo oscuro.
Botón de seguimiento vibrante 3D
Un componente de botón de seguimiento simple inspirado en 3D con colores vibrantes para sitios web comerciales. Es responsivo e incluye soporte para temas oscuros que usan solo HTML y Tailwind CSS.