Componentes Botón Volver al principio Glassmorphism Rainbow Volver al botón superior para la agricultura

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.

Vista previa

Código HTML

<div class="fixed bottom-6 right-6 z-50">
  <!-- Button to scroll to top (actual JS functionality would be added for this) -->
  <button aria-label="Scroll to top" class="group relative overflow-hidden rounded-full p-0.5 focus:outline-none focus:ring-2 focus:ring-offset-2 dark:focus:ring-offset-gray-900 focus:ring-blue-500 transition-all duration-300 transform hover:scale-105 active:scale-95">
    <div class="absolute inset-0 bg-gradient-to-r from-red-500 via-yellow-500 to-green-500 opacity-75 group-hover:opacity-100 transition-opacity duration-300"></div>
    <div class="relative bg-white dark:bg-gray-800 backdrop-blur-md bg-opacity-20 dark:bg-opacity-20 rounded-full px-4 py-2 flex items-center justify-center space-x-2 border border-white border-opacity-30 dark:border-gray-700 dark:border-opacity-30 shadow-lg">
      <svg class="h-6 w-6 text-gray-800 dark:text-gray-100 group-hover:text-white transition-colors duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor">
        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 10l7-7m0 0l7 7m-7-7v18" />
      </svg>
      <span class="hidden sm:inline text-sm font-semibold text-gray-800 dark:text-gray-100 group-hover:text-white transition-colors duration-300">
        To the Fields!
      </span>
    </div>
  </button>
</div>

Componentes relacionados

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.

Abrir

Botón Volver al principio

Un simple botón Volver al principio con diseño de Glassmorphism y esquema de color monocromático para sitios web de comercio electrónico.

Abrir

Skeuomórfico Volver al botón superior

Un botón esqueuomórfico 'Back to Top' diseñado con neutros cálidos para sitios web comerciales / corporativos, con diseño receptivo y soporte para modo oscuro. El botón tiene un efecto de pulsación en 3D.

Abrir