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
Brutalista Volver al principio
Un componente brutalista del botón Volver al principio que utiliza colores en escala de grises y Tailwind CSS. Es sensible y admite el modo oscuro.
Botón Volver al principio
Botón Volver arriba para comercio electrónico, con un vibrante diseño de modo oscuro.
Volver al principio Componente de botón
Un botón responsivo 'Volver al principio' que sigue los principios de Material Design, compatible con el modo oscuro con Tailwind CSS para efectos de estilo y responsivos.