구성 요소 팔로우 버튼 Neumorphic Follow Button 컴포넌트
Neumorphic Follow Button 컴포넌트

일몰/따뜻한 톤의 복잡한 뉴모픽 스타일의 팔로우 버튼 구성 요소로, 부동산 플랫폼용으로 설계되었습니다. 반응형 디자인과 다크 모드 지원이 특징이며, 미묘한 그림자를 사용하여 요소가 배경에서 돌출된 것처럼 보입니다.
미리 보기

HTML 코드

<div class="p-6 md:p-10 bg-orange-100 dark:bg-zinc-800 min-h-screen flex items-center justify-center font-sans">
  <div class="w-full max-w-sm rounded-3xl p-6 shadow-xl relative
    bg-gradient-to-br from-orange-200 to-amber-100 
    dark:from-zinc-700 dark:to-zinc-900 
    dark:shadow-zinc-950/80 shadow-orange-300/60
    
    "> 
    <!-- Neumorphic Card Base -->
    <div class="relative z-10">
      <div class="flex items-center justify-between mb-6">
        <div class="flex items-center space-x-4">
          <img class="w-16 h-16 rounded-full 
            border-2 border-orange-300 dark:border-zinc-600 
            shadow-lg shadow-orange-300/40 dark:shadow-zinc-950/60 
            object-cover" src="https://randomuser.me/api/portraits/women/1.jpg" alt="Agent Avatar">
          <div>
            <h3 class="text-xl font-semibold text-orange-900 dark:text-orange-200">Evelyn Sharp</h3>
            <p class="text-sm text-orange-700 dark:text-zinc-400">Senior Agent</p>
          </div>
        </div>
        <!-- More Info Button -->
        <a href="#" class="
          px-4 py-2 rounded-xl text-sm font-medium 
          bg-gradient-to-br from-orange-300 to-amber-200 
          dark:from-zinc-600 dark:to-zinc-800 
          text-orange-900 dark:text-orange-200 
          shadow-inner shadow-orange-400/60 dark:shadow-zinc-900/60 
          hover:from-orange-400 hover:to-orange-300 
          dark:hover:from-zinc-700 dark:hover:to-zinc-600 
          transform transition-transform duration-300 hover:scale-105 
          active:shadow-none active:scale-95
          sm: block md:inline-block">
          More Info
        </a>
      </div>

      <p class="text-orange-800 dark:text-zinc-300 mb-6 text-sm leading-relaxed">
        Specializing in luxury residential properties in metropolitan areas. Over 10 years of experience helping clients find their dream homes.
      </p>

      <!-- Key Stats / Properties -->
      <div class="grid grid-cols-2 gap-4 mb-8">
        <div class="
          p-4 rounded-xl text-center 
          bg-gradient-to-br from-orange-100 to-amber-50 
          dark:from-zinc-700 dark:to-zinc-900 
          shadow-md shadow-orange-200/50 dark:shadow-zinc-950/50 
          border border-orange-200/50 dark:border-zinc-800/50
          ">
          <p class="text-lg font-bold text-orange-900 dark:text-orange-200">150+</p>
          <p class="text-sm text-orange-700 dark:text-zinc-400">Properties Sold</p>
        </div>
        <div class="
          p-4 rounded-xl text-center 
          bg-gradient-to-br from-orange-100 to-amber-50 
          dark:from-zinc-700 dark:to-zinc-900 
          shadow-md shadow-orange-200/50 dark:shadow-zinc-950/50 
          border border-orange-200/50 dark:border-zinc-800/50
          ">
          <p class="text-lg font-bold text-orange-900 dark:text-orange-200">4.9</p>
          <p class="text-sm text-orange-700 dark:text-zinc-400">Rating</p>
        </div>
      </div>

      <!-- Follow Button -->
      <button class="
        w-full py-4 rounded-2xl text-lg font-bold 
        bg-gradient-to-br from-orange-400 to-amber-300 
        dark:from-amber-600 dark:to-orange-500 
        text-orange-950 dark:text-zinc-950 
        shadow-lg shadow-orange-500/60 dark:shadow-amber-900/60 
        hover:from-orange-500 hover:to-orange-400 
        dark:hover:from-amber-700 dark:hover:to-orange-600 
        transform transition-transform duration-300 
        focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100 
        dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900 
        active:shadow-none active:scale-98
        flex items-center justify-center space-x-2
        ">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
          <path stroke-linecap="round" stroke-linejoin="round" d="M18 9v3m0 0v3m0-3h3m-3 0h-3m-2-5a4 4 1 014 4v6a4 4 01-4 4H8a4 4 01-4-4v-6a4 4 014-4h4z" />
        </svg>
        <span>Follow Agent</span>
      </button>

      <!-- Contact Options -->
      <div class="flex justify-around mt-8">
        <button class="
          p-4 rounded-full 
          bg-gradient-to-br from-orange-200 to-amber-100 
          dark:from-zinc-700 dark:to-zinc-900 
          text-orange-700 dark:text-orange-200 
          shadow-md shadow-orange-300/50 dark:shadow-zinc-950/50 
          hover:from-orange-300 hover:to-orange-200 
          dark:hover:from-zinc-800 dark:hover:to-zinc-700 
          transform transition-transform duration-300 hover:scale-110 
          active:shadow-none active:scale-95
          focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100 
          dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
          ">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 011.854-1.995A2 2 018 2h8a2 2 011.819 1.056l-3.328 10.655a2 2 01-1.077 1.077L13 18.066V20h-2v-1.934L7.509 15.7A2 2 016.438 14.623L3.181 4.944A2 2 013 5z" />
          </svg>
        </button>
        <button class="
          p-4 rounded-full 
          bg-gradient-to-br from-orange-200 to-amber-100 
          dark:from-zinc-700 dark:to-zinc-900 
          text-orange-700 dark:text-orange-200 
          shadow-md shadow-orange-300/50 dark:shadow-zinc-950/50 
          hover:from-orange-300 hover:to-orange-200 
          dark:hover:from-zinc-800 dark:hover:to-zinc-700 
          transform transition-transform duration-300 hover:scale-110 
          active:shadow-none active:scale-95
          focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100 
          dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
          ">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 01-4.255-1.106L4 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z" />
          </svg>
        </button>
        <button class="
          p-4 rounded-full 
          bg-gradient-to-br from-orange-200 to-amber-100 
          dark:from-zinc-700 dark:to-zinc-900 
          text-orange-700 dark:text-orange-200 
          shadow-md shadow-orange-300/50 dark:shadow-zinc-950/50 
          hover:from-orange-300 hover:to-orange-200 
          dark:hover:from-zinc-800 dark:hover:to-zinc-700 
          transform transition-transform duration-300 hover:scale-110 
          active:shadow-none active:scale-95
          focus:outline-none focus:ring-2 focus:ring-orange-300 focus:ring-offset-2 focus:ring-offset-orange-100 
          dark:focus:ring-amber-500 dark:focus:ring-offset-amber-900
          ">
          <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">
            <path stroke-linecap="round" stroke-linejoin="round" d="M3 5a2 2 010.591 1.409L2.5 12l.529.071c.783.111 1.547.452 2.18.98L7.058 15.65h.001a4.522 4.522 004.582 0l2.35-1.921c.633-.528 1.397-.869 2.18-.98l.529-.071L18.5 5a2 2 00-1.802-1.802zM15 11a3 3 01-3 3s-3-3-3-3" />
          </svg>
        </button>
      </div>
    </div>
  </div>
</div>
Neumorphic Follow Button 컴포넌트

미리 보기

HTML 코드

관련 구성 요소

3D-Vibrant-팔로우 버튼

마이크로 인터랙션을 통한 Follow Button

Follow Button 구성 요소
