Componentes Botón Seguir Componente del botón Seguir

Componente del botón Seguir

Un componente complejo de botón de seguimiento inspirado en papel / impresión para sitios web de juegos, con un diseño monocromático en blanco y negro con un color de acento brillante, optimizado para la capacidad de respuesta y el modo oscuro.

Vista previa

Código HTML

<div class="font-sans p-4 sm:p-6 md:p-8 bg-gray-100 text-gray-900 dark:bg-gray-900 dark:text-gray-100 min-h-screen flex items-center justify-center">
  <div class="relative bg-white dark:bg-gray-800 shadow-xl rounded-lg p-6 sm:p-8 md:p-10 border-4 border-gray-200 dark:border-gray-700 max-w-sm w-full transform rotate-1 transition-all duration-300 hover:rotate-0">
    <!-- Paper Fold Top Left -->
    <div class="absolute top-0 left-0 w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-br from-gray-300 to-gray-50 dark:from-gray-700 dark:to-gray-800 rounded-bl-lg border-b border-r border-gray-200 dark:border-gray-700 -translate-x-1/2 -translate-y-1/2 rotate-45 transform origin-bottom-right"></div>
    <!-- Paper Fold Bottom Right -->
    <div class="absolute bottom-0 right-0 w-8 h-8 sm:w-10 sm:h-10 bg-gradient-to-tl from-gray-300 to-gray-50 dark:from-gray-700 dark:to-gray-800 rounded-tr-lg border-t border-l border-gray-200 dark:border-gray-700 translate-x-1/2 translate-y-1/2 -rotate-45 transform origin-top-left"></div>

    <div class="text-center mb-6">
      <img src="https://randomuser.me/api/portraits/men/84.jpg" alt="Gamer Avatar" class="w-24 h-24 sm:w-28 sm:h-28 rounded-full border-4 border-lime-500 dark:border-lime-400 mx-auto mb-4 object-cover shadow-md transform -rotate-2">
      <h2 class="text-2xl sm:text-3xl font-bold tracking-tight text-gray-900 dark:text-gray-100 relative inline-block before:block before:absolute before:-inset-1 before:bg-gradient-to-r before:from-lime-500 before:to-yellow-400 before:skew-y-3 before:rounded-sm z-0">
        <span class="relative text-white dark:text-gray-900">CyberNinja_XP</span>
      </h2>
      <p class="text-sm text-gray-600 dark:text-gray-400 mt-2 font-medium">Pro Gamer | Streamer | Level 99</p>
    </div>

    <div class="flex justify-around items-center mb-6 border-t border-b border-dashed border-gray-300 dark:border-gray-600 py-3">
      <div class="text-center">
        <p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-200">1.2M</p>
        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-widest">Followers</p>
      </div>
      <div class="text-center">
        <p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-200">500</p>
        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-widest">Following</p>
      </div>
      <div class="text-center">
        <p class="text-lg sm:text-xl font-bold text-gray-800 dark:text-gray-200">12,345</p>
        <p class="text-xs text-gray-500 dark:text-gray-400 uppercase tracking-widest">Subscribers</p>
      </div>
    </div>

    <div class="flex flex-col space-y-3">
      <button class="w-full py-3 px-4 rounded-lg bg-lime-500 text-white dark:bg-lime-600 dark:text-gray-900 font-bold text-lg uppercase tracking-wider shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1 hover:scale-105 active:scale-95 active:translate-y-0 focus:outline-none focus:ring-4 focus:ring-lime-300 dark:focus:ring-lime-700 border-b-4 border-lime-700 dark:border-lime-900 relative group overflow-hidden">
        <span class="absolute inset-0 bg-white/20 dark:bg-black/20 transform -skew-x-12 opacity-0 group-hover:opacity-100 transition-all duration-300"></span>
        <span class="relative z-10">Follow Now</span>
      </button>
      <button class="w-full py-3 px-4 rounded-lg bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200 font-semibold text-base uppercase tracking-wide hover:bg-gray-300 dark:hover:bg-gray-600 transition-colors duration-200 border-b-2 border-gray-300 dark:border-gray-600 focus:outline-none focus:ring-2 focus:ring-gray-400 dark:focus:ring-gray-500">
        View Profile
      </button>
    </div>

    <div class="mt-6 text-xs text-gray-400 dark:text-gray-500 text-center uppercase tracking-wider relative">
      <span class="absolute left-0 right-0 top-1/2 h-px bg-gray-300 dark:bg-gray-600 transform -translate-y-1/2"></span>
      <span class="relative z-10 bg-white dark:bg-gray-800 px-2 rotate-1">Player ID: #G4M3R_PR0</span>
    </div>
  </div>
</div>

Componentes relacionados

Componente del botón de seguimiento neumórfico

Un componente complejo del botón de seguimiento de estilo neumórfico con tonos atardeceres/cálidos, diseñado para plataformas inmobiliarias. Cuenta con un diseño responsivo y compatibilidad con el modo oscuro, lo que hace que los elementos parezcan sobresalir del fondo mediante sombras sutiles.

Abrir