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.

Abrir vista previa

                <div class="fixed bottom-4 right-4">
  <a href="#" class="bg-blue-500 text-white p-3 rounded-full shadow-md transition-opacity duration-300 opacity-0 group-hover:opacity-100 dark:bg-blue-700 dark:text-gray-200">
    <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="M5 10l7-7m0 0l7 7m-7-7v18"></path></svg>
  </a>
</div>

<style>
  /* This simple example uses CSS for smooth scrolling. For a production site, you might use a small amount of JavaScript for better compatibility and control over the scroll behavior and when the button appears. */
  html {
    scroll-behavior: smooth;
  }

  /* Basic example to show/hide the button based on scroll position. 
     A robust solution would involve JavaScript Intersection Observer or scroll events. */
  body:before {
    content: "";
    height: 200vh; /* Simulate a long page */
    display: block;
  }

  .group-hover\:opacity-100:hover + .fixed a {
      opacity: 1; /* This part is flawed for demonstrating scroll-based visibility without JS */
  }

  /* A better approach for scroll-based visibility would require JavaScript */
  .fixed a {
      /* Initially hidden, JS would make it visible on scroll */
      opacity: 0;
      transition: opacity 0.3s ease-in-out;
  }


</style>

Volver arriba Botón Minimalista Vibrante

Un componente de botón Volver al principio mínimo y plano con colores vibrantes, adecuado para un sitio web de portafolio. Incluye diseño responsivo y soporte para el modo oscuro usando Tailwind CSS.

Abrir vista previa

                <a href="#" class="fixed bottom-6 right-6 bg-blue-500 hover:bg-blue-700 text-white p-3 rounded-full shadow-lg transition-colors duration-300 dark:bg-blue-700 dark:hover:bg-blue-900">
  <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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
  </svg>
</a>

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.

Abrir vista previa

                <div class="fixed bottom-8 right-8">
    <a href="#" class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-600 text-white shadow-lg transition-all ease-in-out duration-300 hover:bg-gray-500 dark:bg-gray-800 dark:hover:bg-gray-700">
        <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 4v16m8-8H4" />
        </svg>
    </a>
</div>

Volver al principio Componente de botón

Un simple botón Volver al principio diseñado en un estilo brutalista utilizando Tailwind CSS, adecuado para un sitio web de portafolio. Cuenta con un esquema de color en escala de grises y soporte para temas oscuros.

Abrir vista previa

                <div class="fixed bottom-5 right-5 z-50">
    <a href="#top" class="flex items-center justify-center w-12 h-12 rounded-full bg-gray-800 text-white hover:bg-gray-600 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-700 transition-all duration-300 shadow-lg">
        ⬆️
    </a>
</div>

<div class="h-screen bg-gray-100 dark:bg-gray-800" id="top">
    <div class="container mx-auto p-5">
        <h1 class="text-3xl font-bold text-gray-900 dark:text-white">Portfolio</h1>
        <p class="text-gray-700 dark:text-gray-300">Showcasing my work and products.</p>
        <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-5 mt-5">
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/200" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/201" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
            <div class="bg-white dark:bg-gray-700 p-5 shadow rounded-lg">
                <img src="https://picsum.photos/202" alt="Portfolio item" class="w-full rounded-lg">
                <h2 class="text-xl font-semibold text-gray-900 dark:text-white mt-2">Project Title</h2>
                <p class="text-gray-600 dark:text-gray-300">Description of the project goes here.</p>
            </div>
        </div>
    </div>
</div>

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.

Abrir vista previa

                <a href="#" class="fixed bottom-4 right-4 bg-red-500 dark:bg-cyan-500 text-yellow-300 dark:text-magenta-500 p-4 rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-red-500 dark:focus:ring-cyan-500 border-4 border-black dark:border-white z-50">
    <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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
</a>

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.

Abrir vista previa

                <button class="fixed bottom-5 right-5 bg-pink-300 text-white p-3 rounded-full shadow-lg transition-opacity hover:opacity-75 focus:outline-none dark:bg-pink-700 dark:text-gray-200">
  <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>

Botón Volver al principio

Un componente de botón Volver al principio receptivo diseñado con un efecto de morfismo de vidrio, adecuado para sitios web comerciales profesionales. Presenta un diseño simple con elementos mínimos y funciona bien tanto en temas claros como oscuros.

Abrir vista previa

                <div class="fixed bottom-5 right-5">
    <a href="#" class="bg-white bg-opacity-30 backdrop-blur-md border border-gray-200 dark:bg-gray-800 dark:bg-opacity-30 dark:border-gray-600 text-gray-800 dark:text-gray-200 rounded-full p-3 shadow-lg hover:shadow-2xl transition-transform transform hover:scale-110">
        <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 4v16m8-8H4" />
        </svg>
    </a>
</div>

Brutalista Volver al principio

Un componente brutalista del botón Volver al principio que utiliza colores en escala de grises y Tailwind CSS. Es sensible y admite el modo oscuro.

Abrir vista previa

                <button class="fixed bottom-4 right-4 bg-black text-white border-2 border-black group dark:bg-white dark:text-black dark:border-white">
  <span class="block px-6 py-3 text-xl font-bold group-hover:-translate-x-2 group-hover:-translate-y-2 transition-all">
    ⬆️
  </span>
</button>

Botón Volver al principio

Volver al principio Componente de botón con diseño 3D, combinación de colores vibrantes y elementos interactivos complejos para interfaces de redes sociales, utilizando Tailwind CSS. Incluye diseño responsivo y soporte para temas oscuros.

Abrir vista previa

                <div class="fixed bottom-5 right-5 z-50">
  <button
    class="back-to-top-btn bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500 text-white p-4 rounded-full shadow-lg transform transition-transform duration-300 hover:scale-110 active:scale-95 focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800"
    aria-label="Back to top"
  >
    <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="M5 10l7-7m0 0l7 7m-7-7v18"
      ></path>
    </svg>
  </button>
</div>

<style>
  .back-to-top-btn {
    /* Adding basic 3D effect with box-shadow */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2),
                0 6px 6px rgba(0, 0, 0, 0.2);
    transition: all 0.2s ease-in-out;
  }

  .back-to-top-btn:hover {
      box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
                  0 10px 10px rgba(0, 0, 0, 0.22);
  }

  .back-to-top-btn:active {
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12),
                  0 1px 2px rgba(0, 0, 0, 0.24);
  }
</style>

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.

Abrir vista previa

                <div class="fixed bottom-4 right-4 group">
  <button class="bg-blue-600 text-white px-4 py-2 rounded-lg shadow-lg 
                 transform transition-transform duration-300 
                 group-hover:scale-110 group-active:scale-90 
                 dark:bg-blue-800 dark:shadow-xl dark:group-hover:scale-110 dark:group-active:scale-90 
                 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50">
    <svg class="h-6 w-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="M5 10l7-7m0 0l7 7m-7-7v18"></path>
    </svg>
  </button>
</div>

Categorías

Botón Volver al principio