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 componente de botón "Volver al principio" mínimo y receptivo con soporte para modo oscuro. Aparece después de desplazarse hacia abajo y utiliza un desplazamiento suave para devolver al usuario a la parte superior de la página cuando se hace clic en él. No se utiliza JavaScript para el desplazamiento, solo CSS.
Brutalismo Volver al botón de inicio
Volver al principio Componente de botón con estilo Brutalismo, combinación de colores triádica y complejidad compleja. Diseño responsivo con soporte para temas oscuros. Sin JavaScript.
Volver al principio Componente de botón
Un botón responsivo 'Volver al principio' con animaciones centradas en la microinteracción, combinación de colores triádica y compatibilidad con temas oscuros, adecuado para un portafolio.