Componentes Botón Volver al principio Art Deco Volver al botón principal

Art Deco Volver al botón principal

Un componente de botón 'Back to Top' con un diseño Art Deco, con patrones geométricos y colores cálidos del atardecer, adecuado para plataformas de citas / sociales. Incluye un estilo rico e interactivo y es compatible con el modo oscuro.

Vista previa

Código HTML

<div class="fixed bottom-8 right-8 z-50">
  <a href="#" class="group relative flex items-center justify-center p-0.5 overflow-hidden text-2xl font-bold text-white shadow-lg focus:outline-none focus:ring-4 focus:ring-orange-300 dark:focus:ring-orange-800 transition-all duration-300 hover:scale-105 active:scale-95 transform rotate-0 hover:rotate-3">
    <span class="absolute inset-0 bg-gradient-to-br from-orange-400 via-red-500 to-yellow-600 dark:from-orange-700 dark:via-red-800 dark:to-yellow-900 opacity-90 group-hover:opacity-100 transition-opacity duration-300 filter blur-sm group-hover:blur-none"></span>
    <span class="absolute inset-0 bg-[repeating-linear-gradient(45deg,_transparent_0,_transparent_5px,_rgba(255,255,255,0.1)_5px,_rgba(255,255,255,0.1)_10px)] dark:bg-[repeating-linear-gradient(45deg,_transparent_0,_transparent_5px,_rgba(0,0,0,0.2)_5px,_rgba(0,0,0,0.2)_10px)] opacity-30 group-hover:opacity-50 transition-opacity duration-300 transform group-hover:scale-110 group-hover:rotate-12"></span>
    <span class="relative flex items-center justify-center w-16 h-16 sm:w-20 sm:h-20 bg-gradient-to-tl from-orange-600 to-red-600 dark:from-red-900 dark:to-orange-900 rounded-full group-hover:rounded-2xl transition-all duration-300 overflow-hidden shadow-inner shadow-orange-900/50 dark:shadow-red-950/50 group-hover:shadow-lg group-hover:shadow-orange-900/70 dark:group-hover:shadow-red-950/70">
      <span class="absolute inset-0 border-4 border-yellow-300 dark:border-yellow-700 rounded-full group-hover:rounded-2xl transition-all duration-300 opacity-60 group-hover:opacity-100"></span>
      <svg class="w-8 h-8 sm:w-10 sm:h-10 text-white dark:text-gray-200 transform group-hover:-translate-y-1 transition-transform duration-300" 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 class="absolute bottom-1 right-1 w-4 h-4 bg-yellow-300 dark:bg-yellow-700 rounded-full blur-sm opacity-0 group-hover:opacity-100 transition-opacity duration-300"></div>
    </span>
  </a>
</div>

Componentes relacionados

Volver al principio Componente de botón

Un componente de botón 'Volver al principio' receptivo diseñado con principios de diseño de materiales, colores apagados y compatibilidad con modo oscuro, adecuado para blogs o sitios web de consumo de contenido.

Abrir

Volver al principio Componente de botón

Un botón responsivo 'Volver al principio' que sigue los principios de Material Design, compatible con el modo oscuro con Tailwind CSS para efectos de estilo y responsivos.

Abrir

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.

Abrir