Botón Volver al principio - Diseño 3D
Un botón Volver al principio con un diseño 3D, efectos responsivos y soporte de temas oscuros usando Tailwind CSS. No se incluye JavaScript.
Código HTML
<div class="fixed bottom-4 right-4 group">
<button class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg
transform transition-transform duration-300
group-hover:scale-110 group-active:scale-90
dark:bg-blue-800 dark:shadow-xl dark:group-hover:scale-110 dark:group-active:scale-90
focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
<svg class="h-6 w-6" 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>
</button>
</div>Componentes relacionados
Volver al principio Componente de botón
Un componente de botón 'Volver al principio' receptivo para sitios de documentación/wiki, inspirado en Memphis Design con un esquema de color púrpura/violeta. Incluye soporte para el modo oscuro y una apariencia compleja e interactiva.
Botón Volver al principio
Un simple botón Volver al principio con diseño de Glassmorphism y esquema de color monocromático para sitios web de comercio electrónico.
Volver al principio Componente de botón
Un componente de botón Volver al principio receptivo con diseño de Glassmorphism, combinación de colores en tonos tierra e interacciones complejas, adecuado para un tablero.