Botón Volver al principio

Volver arriba Botón - Brutalismo

Un componente brutalista del botón "Volver al principio" para un portafolio, con una combinación de colores triádica y un diseño sencillo. Es responsivo y admite el modo oscuro usando Tailwind CSS.

Abrir vista previa

                <a href="#" class="fixed bottom-4 right-4 bg-red-500 text-yellow-300 border-4 border-black dark:bg-red-700 dark:text-yellow-100 dark:border-white transition-all duration-300 hover:bg-red-600 hover:text-yellow-400 dark:hover:bg-red-800 dark:hover:text-yellow-200 p-4 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] z-50">
    <span class="font-extrabold text-xl uppercase">↑<br/>Top</span>
</a>

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.

Abrir vista previa

                <div class="fixed bottom-6 right-6">
  <a href="#top" class="group relative flex items-center justify-center p-3 rounded-full bg-blue-500 text-white shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-700 dark:hover:scale-110 dark:focus:ring-blue-800">
    <svg class="w-6 h-6 transform transition-transform duration-300 group-hover:-translate-y-1 group-hocus:-translate-y-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
      <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M8 7l4-4m0 0l4 4m-4-4v18"></path>
    </svg>
    <span class="absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 text-xs font-semibold opacity-0 group-hover:opacity-100 group-focus:opacity-100 transition-opacity duration-300 delay-150">Back to Top</span>
  </a>
</div>

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 vista previa

                <div class="fixed bottom-4 right-4">
  <a href="#" class="bg-gray-300 dark:bg-gray-700 text-gray-800 dark:text-gray-200 p-3 rounded-full shadow-md hover:bg-gray-400 dark:hover:bg-gray-600 transition-colors duration-300 ease-in-out flex items-center justify-center">
    <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="M5 10l7-7m0 0l7 7m-7-7v18" />
    </svg>
  </a>
</div>

Volver al principio Componente de botón

Un componente de botón Volver al principio receptivo con diseño de Glassmorphism, combinación de colores en tonos tierra e interacciones complejas, adecuado para un tablero.

Abrir vista previa

                <div class="fixed bottom-6 right-6">
  <a href="#top" class="group block">
    <button class="relative flex items-center justify-center w-16 h-16 bg-white dark:bg-gray-800 bg-opacity-20 dark:bg-opacity-20 backdrop-filter backdrop-blur-lg rounded-full shadow-lg transition-all duration-300 ease-in-out hover:scale-110 focus:outline-none focus:ring-4 focus:ring-teal-500 dark:focus:ring-teal-400 focus:ring-opacity-70">
      <svg class="w-8 h-8 text-gray-800 dark:text-gray-200 transform transition-transform duration-300 ease-in-out group-hover:-translate-y-1" 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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
      </svg>
      <span class="absolute top-1/2 left-1/2 -translate-x-1/2 translate-y-full opacity-0 group-hover:opacity-100 group-hover:translate-y-1/2 px-3 py-1 bg-gray-800 dark:bg-gray-200 text-white dark:text-gray-800 text-sm font-semibold rounded-md whitespace-nowrap transition-all duration-300 ease-in-out">
        Back to Top
      </span>
    </button>
  </a>
</div>

<div class="min-h-screen bg-gradient-to-br from-stone-100 via-stone-200 to-stone-300 dark:from-stone-800 dark:via-stone-900 dark:to-black flex flex-col items-center justify-center p-8">
  <h1 id="top" class="text-5xl font-extrabold text-gray-900 dark:text-white mb-8 text-center">Dashboard Overview</h1>
  <p class="text-lg text-gray-700 dark:text-gray-300 max-w-2xl text-center mb-12">
    Scroll down to see the

Un simple y elegante botón de retroceso que aparece fijo en la esquina inferior derecha de la pantalla. Cuenta con una sutil combinación de colores pastel y microinteracciones suaves de desplazamiento/enfoque. El botón incluye un diseño responsivo con soporte incorporado para el modo oscuro. Al pasar el cursor sobre el botón, el botón se escala suavemente y cambia el color de fondo para proporcionar información visual. El componente solo utiliza clases CSS de Tailwind, sin necesidad de JavaScript.

Abrir vista previa

                <button onclick="window.scrollTo({top: 0, behavior: 'smooth'})" class="fixed bottom-6 right-6 p-3 rounded-full bg-pink-200 dark:bg-pink-900 text-pink-700 dark:text-pink-200 shadow-md hover:bg-pink-300 dark:hover:bg-pink-800 focus:outline-none focus:ring-2 focus:ring-pink-400 dark:focus:ring-pink-700 hover:scale-110 focus:scale-110 transition-all duration-300 group">
  <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 transform group-hover:-translate-y-1 transition-transform duration-300" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
    <path stroke-linecap="round" stroke-linejoin="round" d="M5 10l7-7m0 0l7 7m-7-7v18" />
  </svg>
  <span class="sr-only">Back to top</span>
</button>

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

Abrir vista previa

                <!-- Back to Top Button Component -->
<a href="#top" class="fixed bottom-6 right-6 flex items-center justify-center w-12 h-12 bg-emerald-700 text-white rounded-full shadow-lg transform transition-transform duration-200 hover:scale-110 hover:bg-emerald-600 dark:bg-emerald-600 dark:hover:bg-emerald-500" aria-label="Back to Top">
  <span class="sr-only">Back to Top</span>
  <svg class="w-6 h-6" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24" aria-hidden="true">
    <path stroke-linecap="round" stroke-linejoin="round" d="M5 15l7-7 7 7"/>
  </svg>
</a>

<!-- To enable smooth scrolling behavior across the page, add the `scroll-smooth` class to your `<html>` element: -->
<!-- <html class="scroll-smooth"> -->

Botón Volver al principio

Un simple botón Volver al principio con diseño de Glassmorphism y esquema de color monocromático para sitios web de comercio electrónico.

Abrir vista previa

                <div class="fixed bottom-10 right-10">
    <a href="#top" class="flex items-center justify-center w-12 h-12 rounded-full bg-white bg-opacity-30 backdrop-blur-md shadow-lg hover:bg-opacity-50 transition duration-300 dark:bg-gray-800 dark:bg-opacity-50 dark:hover:bg-opacity-70">
        <img src="https://picsum.photos/32" alt="Back to Top" class="w-8 h-8" />
    </a>
</div>

Botón Volver al principio

Botón Volver al principio con diseño neumórfico, combinación de colores monocromática y compatibilidad con el modo oscuro. Utiliza Tailwind CSS.

Abrir vista previa

                <template>
  <button
    :class="[
      'fixed bottom-6 right-6 p-4 rounded-full shadow-lg transition-all duration-300',
      'bg-gray-200 text-gray-700',
      'dark:bg-gray-700 dark:text-gray-200 dark:shadow-lg-dark',
      'hover:shadow-xl hover:-translate-y-1',
      'dark:hover:shadow-xl-dark dark:hover:-translate-y-1',
    ]"
    @click="scrollToTop"
    v-show="isVisible"
  >
    <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="M5 10l7-7m0 0l7 7m-7-7v18"
      />
    </svg>
  </button>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';

const isVisible = ref(false);

const scrollToTop = () => {
  window.scrollTo({ top: 0, behavior: 'smooth' });
};

const handleScroll = () => {
  isVisible.value = window.scrollY > 100;
};

onMounted(() => {
  window.addEventListener('scroll', handleScroll);
});

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll);
});
</script>

<style scoped>
.shadow-lg {
  box-shadow: 7px 7px 14px #cbced1, -7px -7px 14px #ffffff;
}

.shadow-xl {
  box-shadow: 9px 9px 18px #cbced1, -9px -9px 18px #ffffff;
}

.dark .shadow-lg-dark {
  box-shadow: 7px 7px 14px #4a4a4a, -7px -7px 14px #626262;
}

.dark .shadow-xl-dark {
  box-shadow: 9px 9px 18px #4a4a4a, -9px -9px 18px #626262;
}
</style>

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.

Abrir vista previa

                <div class="fixed bottom-4 right-4">
    <button class="bg-gradient-to-r from-purple-600 to-pink-600 text-white rounded-full p-3 shadow-lg hover:scale-110 transition-transform duration-300 dark:from-purple-800 dark:to-pink-800">
        <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 4v16m0 0l-4-4m4 4l4-4" />
        </svg>
    </button>
</div>

Botón Volver al principio

Un componente de botón Volver al principio de diseño plano minimalista para sitios web de comercio electrónico, que utiliza un esquema de color en escala de grises y un diseño receptivo con soporte para temas oscuros.

Abrir vista previa

                <div class="fixed bottom-5 right-5 z-50">
    <button class="bg-gray-800 text-white rounded-full p-3 shadow-md hover:bg-gray-700 dark:bg-gray-300 dark:text-gray-800 dark:hover:bg-gray-400 transition-all duration-200">
        <svg xmlns="http://www.w3.org/2000/svg" class="w-6 h-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>
    </button>
</div>

Categorías

Botón Volver al principio