CCHub Logo CCHub Tailwind Collection
구성 요소 좋아요/반응 버튼 Like/Reaction Buttons 컴포넌트

Like/Reaction Buttons 컴포넌트

마이크로 인터랙션, 유사한 색 구성표, 반응형 디자인 및 어두운 테마 지원을 갖춘 복잡한 Like/Reaction Buttons 구성 요소로, 대시보드에 적합합니다. Tailwind CSS를 사용하고 매력적인 애니메이션과 함께 여러 대화형 요소를 포함합니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center bg-gray-100 dark:bg-gray-900 p-4 min-h-screen">
  <div class="flex space-x-2">
    <!-- Primary Like Button -->
    <button class="flex items-center space-x-1 px-4 py-2 rounded-full bg-blue-500 text-white hover:bg-blue-600 transform transition-transform duration-200 hover:scale-105 focus:outline-none dark:bg-blue-700 dark:hover:bg-blue-800">
      <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M2 10.5a1.5 1.5 0 113 0v6a1.5 1.5 0 01-3 0v-6zM6 10.333v5.667a2 2 0 002 2h2.983a2 2 0 001.828-1.154l3.913-7K11 2.167v1.833A2.5 2.5 0 008.5 6H5a2 2 0 00-2 2v2.333L6 10.333z"></path>
      </svg>
      <span>Like</span>
      <span class="text-sm">123</span>
    </button>


    <!-- Reaction Buttons - Example using emojis -->
    <div class="relative group">
      <button class="flex items-center space-x-1 px-4 py-2 rounded-full bg-green-500 text-white hover:bg-green-600 transform transition-transform duration-200 hover:scale-105 focus:outline-none dark:bg-green-700 dark:hover:bg-green-800">
        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-smile">
          <circle cx="12" cy="12" r="10"></circle>
          <path d="M8 14s1.5 2 4 2 4-2 4-2"></path>
          <line x1="9" y1="9" x2="9.01" y2="9"></line>
          <line x1="15" y1="9" x2="15.01" y2="9"></line>
        </svg>
        <span>React</span>
      </button>
      

      <!-- Reaction Options (Hidden by default, shown on hover) -->
      <div class="absolute bottom-full mb-2 left-1/2 transform -translate-x-1/2 flex space-x-1 bg-white dark:bg-gray-800 p-2 rounded-full shadow-lg opacity-0 group-hover:opacity-100 transition-opacity duration-300 z-10">
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">👍</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">❤️</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😆</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😮</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😢</button>
        <button class="p-2 text-xl hover:scale-125 transform transition-transform duration-150">😡</button>
      </div>
    </div>

  </div>
</div>

관련 구성 요소

뉴모픽 라이크/리액션 버튼

뉴모픽 디자인 스타일, 보석 톤 색 구성표 및 금융/은행 인터페이스에 적합한 다크 모드 지원을 갖춘 간단하고 반응이 빠른 좋아요/반응 버튼 세트입니다.

열다

스큐어모픽 라이크/리액션 버튼(Skeuomorphic Like/Reaction Buttons) 컴포넌트

복잡하고 반응이 빠르며 어두운 테마로 활성화된 Skeuomorphic Like/Reaction Buttons 컴포넌트는 전자 상거래를 위한 단색 색 구성표를 사용합니다.

열다

Like/Reaction Buttons 컴포넌트

Tailwind CSS와 함께 Brutalism 스타일로 디자인된 Like/Reaction Buttons 구성 요소로, 반응형 효과와 어두운 테마 지원을 특징으로 합니다.

열다