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.
Código HTML
<div class="fixed bottom-5 right-5 z-50">
<button class="bg-blue-500 text-white rounded-full p-2 shadow-lg transition-transform transform hover:scale-110 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 dark:bg-blue-700 dark:shadow-md dark:focus:ring-blue-300">
<svg class="w-6 h-6" 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="M12 4v16m0 0L8 16m4 4l4-4" />
</svg>
</button>
</div>
<style>
/* Tailwind dark mode support */
@media (prefers-color-scheme: dark) {
.bg-blue-500 { background-color: #3b82f6; }
.bg-blue-700 { background-color: #2563eb; }
.text-white { color: #ffffff; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }
.dark .shadow-md { box-shadow: 0 4px 10px -2px rgba(0, 0, 0, 0.3); }
}
</style>Componentes relacionados
Volver al principio Componente de botón
Un botón de regreso al principio receptivo diseñado con microinteracciones y colores vibrantes, adecuado para una interfaz de tablero con soporte de modo oscuro.
Botón Volver al principio
Un componente de botón Volver al principio con microinteracciones, combinación de colores en tonos tierra, diseño simple para sitios web comerciales / corporativos; diseño responsivo con soporte de modo oscuro usando Tailwind 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.