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
Volver arriba Botón - Material Design Pastel
Un componente de botón "Volver al principio" responsivo que sigue los principios de Material Design con una combinación de colores pastel, adaptado para un sitio web de portafolio. Incluye diseño responsivo y soporte para el modo oscuro usando Tailwind CSS.
Brutalista Volver al botón superior
Un botón brutalista de vuelta hacia arriba en Tailwind CSS, con alto contraste, tipografía atrevida y bordes afilados. Incluye tamaño responsivo y soporte para modo oscuro.
Glassmorphism Rainbow Volver al botón superior para la agricultura
Un componente de botón 'Volver al principio' complejo y receptivo con un diseño de morfismo de vidrio y un degradado de arco iris, diseñado para sitios web de agricultura/ganadería. Cuenta con efectos de desenfoque y compatibilidad con el modo oscuro.