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 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.
Volver arriba Botón - Material Design Pastel
Un componente de botón "Volver al principio" responsivo que sigue los principios de Material Design con una combinación de colores pastel, adaptado para un sitio web de portafolio. Incluye diseño responsivo y soporte para el modo oscuro usando Tailwind CSS.
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.