Botón neumórfico Volver al principio (azul océano)
Un simple componente de botón 'Back to Top' diseñado con un estilo neumórfico, utilizando tonos azul océano, adecuado para plataformas de música/audio. Es totalmente sensible y es compatible con el modo oscuro.
Código HTML
<div class="flex justify-center items-center h-screen bg-blue-100 dark:bg-gray-900 duration-300">
<!-- Component Wrapper -->
<a href="#top" class="
relative z-10
p-4 md:p-5
rounded-full
shadow-neumorphic-light-blue dark:shadow-neumorphic-dark-blue
text-blue-600 dark:text-blue-300
hover:shadow-neumorphic-light-blue-pressed dark:hover:shadow-neumorphic-dark-blue-pressed
active:shadow-neumorphic-light-blue-pressed dark:active:shadow-neumorphic-dark-blue-pressed
transition-all duration-300 ease-in-out
focus:outline-none focus:ring-2 focus:ring-blue-400 focus:ring-opacity-75
group
">
<svg class="w-8 h-8 md:w-10 md:h-10 rotate-180 transition-transform duration-300 group-hover:-translate-y-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg>
<!-- Hidden arrow for hover effect (optional, uncomment to enable) -->
<!-- <svg class="absolute w-8 h-8 md:w-10 md:h-10 text-blue-400 dark:text-blue-500 opacity-0 group-hover:opacity-100 transition-opacity duration-300 inset-0 m-auto -translate-y-2 group-hover:translate-y-0" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path>
</svg> -->
</a>
<!-- Tailwind JIT custom utility classes for neumorphism (add these to your tailwind.config.js) -->
<style>
/* Light mode */
.shadow-neumorphic-light-blue {
box-shadow: 6px 6px 12px #98b3d6, -6px -6px 12px #cbe7ff;
}
.shadow-neumorphic-light-blue-pressed {
box-shadow: inset 4px 4px 8px #98b3d6, inset -4px -4px 8px #cbe7ff;
}
/* Dark mode */
.dark .shadow-neumorphic-dark-blue {
box-shadow: 6px 6px 12px #181c2f, -6px -6px 12px #263456;
}
.dark .shadow-neumorphic-dark-blue-pressed {
box-shadow: inset 4px 4px 8px #181c2f, inset -4px -4px 8px #263456;
}
</style>
</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.
Volver al principio Componente de botón
Un simple botón Volver al principio diseñado en un estilo brutalista utilizando Tailwind CSS, adecuado para un sitio web de portafolio. Cuenta con un esquema de color en escala de grises y soporte para temas oscuros.
Volver arriba Botón - Brutalismo
Un componente brutalista del botón "Volver al principio" para un portafolio, con una combinación de colores triádica y un diseño sencillo. Es responsivo y admite el modo oscuro usando Tailwind CSS.