Volver al principio Componente de botón
Un botón "Volver al principio" simple y artístico diseñado para sitios web de alimentos / restaurantes, con una estética en escala de grises inspirada en la acuarela. Es responsivo y admite el modo oscuro.
Código HTML
<a href="#" aria-label="Back to top" class="fixed bottom-4 right-4 md:bottom-8 md:right-8 z-50 group focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-gray-900 dark:focus:ring-gray-100">
<div class="relative w-14 h-14 md:w-16 md:h-16 rounded-full overflow-hidden shadow-lg transform transition-all duration-300 group-hover:scale-110 group-active:scale-95 border-2 border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800">
<!-- Artistic background layer -->
<div class="absolute inset-0 bg-gradient-to-br from-gray-100 to-gray-300 dark:from-gray-700 dark:to-gray-900 opacity-70 group-hover:opacity-90 transition-opacity duration-300">
<!-- Example of a subtle watercolor texture effect (can be replaced with actual SVG or background image for more detail) -->
<svg class="absolute inset-0 w-full h-full opacity-30 group-hover:opacity-50 transition-opacity duration-300" viewBox="0 0 100 100" preserveAspectRatio="none">
<defs>
<filter id="watercolorFilter" x="-50%" y="-50%" width="200%" height="200%">
<feTurbulence type="fractalNoise" baseFrequency="0.05" numOctaves="3" result="noise" />
<feDiffuseLighting in="noise" lighting-color="white" surfaceScale="2" result="light" />
<feBlend in="SourceGraphic" in2="light" mode="overlay" />
</filter>
</defs>
<rect width="100" height="100" fill="#fff" filter="url(#watercolorFilter)" class="dark:fill-gray-900"/>
</svg>
</div>
<div class="absolute inset-0 flex items-center justify-center">
<svg class="w-8 h-8 md:w-9 md:h-9 text-gray-700 dark:text-gray-300 transform transition-transform duration-300 group-hover:-translate-y-1 group-active:translate-y-0" 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>
</div>
</div>
</a>Componentes relacionados
Volver al principio Componente de botón
Un botón de regreso al principio receptivo con un diseño inspirado en el papel / impresión, que usa un esquema de color en blanco y negro con un acento sutil. Adecuado para plataformas educativas, incluye soporte para modo oscuro y un diseño limpio y accesible.
Botón Volver al principio
Un botón Volver al principio de Material Design que aparece cuando el usuario se desplaza hacia abajo en la página. Incluye soporte para modo oscuro y desplazamiento suave.
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.