구성 요소 좋아요/반응 버튼 사이버펑크라이크리액션버튼

사이버펑크라이크리액션버튼

마켓플레이스를 위한 단순하고 반응이 빠른 좋아요/반응 버튼 구성 요소로, 오션 블루 톤과 다크 모드 지원으로 사이버펑크 미학을 특징으로 합니다.

미리 보기

HTML 코드

<div class="p-4 sm:p-6 bg-gray-900 border border-blue-900 shadow-lg rounded-xl dark:bg-gray-950 dark:border-blue-950">
  <div class="flex justify-around items-center space-x-2">
    <button class="flex items-center space-x-1 p-2 rounded-full transition-all duration-300 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700 active:scale-95 group">
      <svg class="w-6 h-6 text-blue-400 group-hover:text-blue-200 transition-colors duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path fill-rule="evenodd" d="M3.172 5.172a4 4 0 015.656 0L10 6.343l1.172-1.171a4 4 0 115.656 5.656L10 17.657l-6.828-6.829a4 4 0 010-5.656z" clip-rule="evenodd"></path>
      </svg>
      <span class="block text-sm font-semibold text-blue-300 group-hover:text-blue-100 transition-colors duration-300 hidden sm:block">Like</span>
      <span class="text-sm text-blue-500 group-hover:text-blue-300 transition-colors duration-300">2.5K</span>
    </button>

    <button class="flex items-center space-x-1 p-2 rounded-full transition-all duration-300 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700 active:scale-95 group">
      <svg class="w-6 h-6 text-blue-400 group-hover:text-blue-200 transition-colors duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M18 13v6a2 2 0 01-2 2H4a2 2 0 01-2-2V7a2 2 0 012-2h8l3-3 3 3v6z"></path>
      </svg>
      <span class="block text-sm font-semibold text-blue-300 group-hover:text-blue-100 transition-colors duration-300 hidden sm:block">Save</span>
    </button>

    <button class="flex items-center space-x-1 p-2 rounded-full transition-all duration-300 hover:bg-blue-800 focus:outline-none focus:ring-2 focus:ring-blue-700 active:scale-95 group">
      <svg class="w-6 h-6 text-blue-400 group-hover:text-blue-200 transition-colors duration-300" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
        <path d="M15 8a3 3 0 10-2.977-2.977L5.582 12.02A3 3 0 1010.42.977l6.467 6.467a3 3 0 10-.98.98L9.02 8.02A3 3 0 1015 8z"></path>
      </svg>
      <span class="block text-sm font-semibold text-blue-300 group-hover:text-blue-100 transition-colors duration-300 hidden sm:block">Share</span>
    </button>
  </div>
</div>

관련 구성 요소

Like/Reaction Buttons 컴포넌트

Neumorphism 스타일의 Like/Reaction buttons 구성 요소는 복잡한 디자인과 다크 모드를 지원하는 블로그를 위한 것입니다.

열다

좋아요/반응 버튼

Like/Reaction Buttons 구성 요소에는 Microinteractions, 응답성 및 어두운 테마 지원이 있습니다.

열다

좋아요/반응 버튼

브루탈리즘 디자인, 어스 톤, 복잡한 상호 작용, 반응형, 어두운 테마 지원이 있는 좋아요/반응 버튼 구성 요소.. JS 없음, Tailwind가 있는 순수한 HTML.

열다