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.
Código HTML
<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
<a href="#" class="back-to-top-button relative p-4 rounded-full shadow-neumorphic-light dark:shadow-neumorphic-dark flex items-center justify-center transition-all duration-300 hover:shadow-neumorphic-light-hover dark:hover:shadow-neumorphic-dark-hover"
aria-label="Back to top">
<svg class="w-6 h-6 text-indigo-600 dark:text-purple-400" 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>
</a>
</div>
<style>
.shadow-neumorphic-light {
box-shadow: 8px 8px 16px #cbced1, -8px -8px 16px #ffffff;
}
.dark .shadow-neumorphic-dark {
box-shadow: 8px 8px 16px #1a1a1a, -8px -8px 16px #2e2e2e;
}
.shadow-neumorphic-light-hover {
box-shadow: inset 6px 6px 12px #cbced1, inset -6px -6px 12px #ffffff;
}
.dark .shadow-neumorphic-dark-hover {
box-shadow: inset 6px 6px 12px #1a1a1a, inset -6px -6px 12px #2e2e2e;
}
</style>Componentes relacionados
Brutalismo Volver al botón de inicio
Volver al principio Componente de botón con estilo Brutalismo, combinación de colores triádica y complejidad compleja. Diseño responsivo con soporte para temas oscuros. Sin JavaScript.
Botón Volver al principio
Un simple y elegante botón de retroceso que aparece fijo en la esquina inferior derecha de la pantalla. Cuenta con una sutil combinación de colores pastel y microinteracciones suaves de desplazamiento/enfoque. El botón incluye un diseño responsivo con soporte incorporado para el modo oscuro. Al pasar el cursor sobre el botón, el botón se escala suavemente y cambia el color de fondo para proporcionar información visual. El componente solo utiliza clases CSS de Tailwind, sin necesidad de JavaScript.
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.