Botón Volver al principio

Un botón Volver al principio minimalista y de diseño plano que cabe dentro de la interfaz de un tablero. El botón está diseñado en un esquema de color monocromático e incluye efectos de desplazamiento y enfoque para una mejor interactividad. También es sensible y admite el modo oscuro.

Vista previa

Código HTML

<div class="fixed bottom-8 right-8">
    <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-600 text-white shadow-lg transition-all ease-in-out duration-300 hover:bg-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
        </svg>
    </a>
</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

Volver al principio Componente de botón

Un componente de botón 'Volver al principio' receptivo para sitios de comercio electrónico, con un diseño monocromático en blanco y negro con un color de acento brillante y una microinteracción atractiva al pasar el mouse. Incluye soporte para modo oscuro.

Abrir

Volver al principio Componente de botón

Un componente de botón Back to Top minimalista y plano para tableros, con un esquema de color monocromático. Es moderadamente complejo con características interactivas, un diseño responsivo y soporte para temas oscuros, construido puramente con HTML y Tailwind CSS.

Abrir