Botón Volver al principio
Un botón minimalista 'Back to Top' con efectos responsivos y soporte de temas oscuros usando Tailwind CSS.
Código HTML
<div class="fixed bottom-5 right-5 z-50">
<a href="#" class="flex items-center justify-center w-12 h-12 bg-blue-500 text-white rounded-full shadow-lg hover:bg-blue-600 transition duration-300 ease-in-out dark:bg-gray-700 dark:text-gray-200 dark:hover:bg-gray-600">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
</svg>
</a>
</div>
<style>
@media (prefers-color-scheme: dark) {
.bg-blue-500 {
background-color: #3b82f6;
}
.hover\:bg-blue-600:hover {
background-color: #2563eb;
}
}
</style>Componentes relacionados
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.
Botón Volver al principio - Diseño 3D
Un botón Volver al principio con un diseño 3D, efectos responsivos y soporte de temas oscuros usando Tailwind CSS. No se incluye JavaScript.
Botón Neumórfico Volver al principio
Un botón neumórfico "Back to Top" para el comercio electrónico, que ofrece un diseño de interfaz de usuario sutil y suave que se funde con el fondo mediante delicadas sombras. Cuenta con colores análogos para una apariencia armoniosa, un diseño simple y un diseño receptivo con soporte para temas oscuros, ideal para experiencias de compra en línea.