Volver al principio Componente de botón
Un componente de botón 'Volver al principio' receptivo diseñado para el comercio electrónico, con una combinación de colores vibrantes sobre un fondo oscuro. Incluye un sutil efecto de desplazamiento y garantiza la visibilidad en todos los tamaños de pantalla con soporte para el modo oscuro.
Código HTML
<div class="fixed bottom-4 right-4 z-50">
<a href="#top" class="group block p-3 rounded-full bg-gradient-to-br from-purple-600 to-indigo-500 shadow-lg transition-all duration-300 ease-in-out hover:from-purple-700 hover:to-indigo-600 focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800">
<svg class="w-6 h-6 text-white transform transition-transform duration-300 ease-in-out group-hover:-translate-y-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18"></path>
</svg>
<span class="sr-only">Back to Top</span>
</a>
</div>Componentes relacionados
Volver al principio Componente de botón
Un botón receptivo 'Volver al principio' con un diseño artístico de acuarela, combinación de colores otoñales y compatibilidad con el modo oscuro, adecuado para sitios de blogs / contenido.
Botón Neumórfico Volver al principio
Un botón neumórfico "Back to Top" para el comercio electrónico, que ofrece un diseño de interfaz de usuario sutil y suave que se funde con el fondo mediante delicadas sombras. Cuenta con colores análogos para una apariencia armoniosa, un diseño simple y un diseño receptivo con soporte para temas oscuros, ideal para experiencias de compra en línea.
Botón Volver al principio
Botón Volver al principio con diseño neumórfico, combinación de colores monocromática y compatibilidad con el modo oscuro. Utiliza Tailwind CSS.