Retro_Reaction_Buttons_Industrial
Simple, responsive like/reaction buttons component with a retro industrial aesthetic, suitable for manufacturing or industrial company websites.
HTML Code
<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>
Related Components
Skeuomorphic Reaction Buttons
A set of like and reaction buttons with a Skeuomorphic design style, supporting responsive layouts and dark mode. The buttons are implemented purely with HTML and Tailwind CSS, with no JavaScript. Dark mode is handled via CSS classes. Placeholder images are used for avatars.
Like/Reaction Buttons Component
A complex, responsive, monochromatic like/reaction buttons component with microinteraction-focused animations for business/corporate websites, supporting dark theme.