구성 요소 좋아요/반응 버튼 Retro_Reaction_Buttons_Industrial

Retro_Reaction_Buttons_Industrial

복고풍 산업 미학을 지닌 간단하고 반응이 빠른 좋아요/반응 버튼 구성 요소로 제조 또는 산업 회사 웹사이트에 적합합니다.

미리 보기

HTML 코드

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4 font-mono select-none">
  <div class="bg-gray-200 dark:bg-gray-800 rounded-lg shadow-xl p-6 border-4 border-gray-400 dark:border-gray-700 w-full max-w-sm">
    <h3 class="text-center text-xl font-bold mb-6 text-gray-800 dark:text-gray-200 uppercase tracking-wider">Process Feedback</h3>
    <div class="flex justify-around space-x-4 mb-6">
      <!-- Like Button -->
      <button class="flex flex-col items-center p-3 rounded-md transition-transform duration-200 ease-in-out transform hover:scale-105 active:scale-95
                     bg-blue-600 dark:bg-blue-700 text-white font-semibold shadow-lg
                     border-b-4 border-r-4 border-blue-800 dark:border-blue-900
                     hover:bg-blue-700 dark:hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-600">
        <svg class="w-8 h-8 md:w-10 md:h-10" 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.5a2.5 2.5 0 002.5 2.5h2.464l-.929 3.488a1 1 0 001.942.518L13 16.582V13a2.5 2.5 0 002.5-2.5V6.5a2.5 2.5 0 00-2.5-2.5h-1.586a1.5 1.5 0 01-1.06-.44L10 2.5v-.5A1.5 1.5 0 008.5 1h-1A1.5 1.5 0 006 2.5v1.272a1.5 1.5 0 01-.447 1.06L4.354 7.646A1.5 1.5 0 003.293 8.707L2.5 9.5a1.5 1.5 0 00-.5 1.06v0z"></path>
        </svg>
        <span class="mt-2 text-sm md:text-base">Success</span>
      </button>

      <!-- Dislike Button -->
      <button class="flex flex-col items-center p-3 rounded-md transition-transform duration-200 ease-in-out transform hover:scale-105 active:scale-95
                     bg-red-600 dark:bg-red-700 text-white font-semibold shadow-lg
                     border-b-4 border-r-4 border-red-800 dark:border-red-900
                     hover:bg-red-700 dark:hover:bg-red-800 focus:outline-none focus:ring-4 focus:ring-red-300 dark:focus:ring-red-600">
        <svg class="w-8 h-8 md:w-10 md:h-10" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
          <path d="M18 9.5a1.5 1.5 0 11-3 0v-6a1.5 1.5 0 013 0v6zM14 9.667v-5.5a2.5 2.5 0 00-2.5-2.5H9.036l.929-3.488A1 1 0 008.023.002L7 3.418V7a2.5 2.5 0 00-2.5 2.5v4a2.5 2.5 0 002.5 2.5h1.586a1.5 1.5 0 011.06.44L10 17.5v.5A1.5 1.5 0 0011.5 19h1a1.5 1.5 0 001.5-1.5v-1.272a1.5 1.5 0 01.447-1.06L15.646 12.354A1.5 1.5 0 0016.707 11.293L17.5 10.5a1.5 1.5 0 00.5-1.06v0z"></path>
        </svg>
        <span class="mt-2 text-sm md:text-base">Failure</span>
      </button>
    </div>
    <p class="text-center text-sm text-gray-700 dark:text-gray-400 mt-4 leading-relaxed">Provide quick feedback on operational processes.</p>
  </div>
</div>

관련 구성 요소

Glassmorphism Like/Reaction Buttons 컴포넌트

포트폴리오를 위한 Glassmorphism Like/Reaction Buttons 구성 요소 - Simple, Responsive, Dark Theme

열다

Like/Reaction Buttons 컴포넌트

스큐어모픽 스타일로 디자인된 좋아요 및 반응 버튼을 특징으로 하는 웹 구성 요소로, Tailwind CSS를 사용하여 반응형 효과와 어두운 테마를 지원합니다.

열다

Like/Reaction Buttons 컴포넌트

반투명 요소와 흐림 효과가 있는 glassmorphism을 특징으로 하는 복잡한 웹 구성 요소입니다. 여기에는 비즈니스 웹사이트용으로 설계된 여러 대화형 요소가 포함되어 있으며 다크 모드를 지원합니다.

열다