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
Botón Volver al principio
Un componente de botón Volver al principio de diseño plano minimalista para sitios web de comercio electrónico, que utiliza un esquema de color en escala de grises y un diseño receptivo con soporte para temas oscuros.
Volver al principio Componente de botón
Un botón de regreso al principio receptivo diseñado con microinteracciones y colores vibrantes, adecuado para una interfaz de tablero con soporte de modo oscuro.
Botón Volver al principio
Un componente de botón Volver al principio receptivo diseñado con un efecto de morfismo de vidrio, adecuado para sitios web comerciales profesionales. Presenta un diseño simple con elementos mínimos y funciona bien tanto en temas claros como oscuros.