Retro_Reaction_Buttons_Industrial
Einfache, reaktionsschnelle Komponente für Like-/Reaction-Buttons mit einer Retro-Industrie-Ästhetik, geeignet für Websites von Fertigungs- oder Industrieunternehmen.
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>
Verwandte Komponenten
Komponente "Gefällt mir/Reaktions-Buttons"
Eine komplexe Like/Reaction Buttons-Komponente mit Mikrointeraktionen, analogem Farbschema, responsivem Design und Unterstützung für dunkle Themen, geeignet für ein Dashboard. Verwendet Tailwind CSS und enthält mehrere interaktive Elemente mit ansprechenden Animationen.
Glassmorphism Like/Reaction Buttons-Komponente
Glassmorphism Like/Reaction Buttons Komponente für Portfolio - Einfaches, responsives, dunkles Thema
Komponente "Gefällt mir/Reaktions-Buttons"
Eine Neumorphism-artige Like/Reaction-Buttons-Komponente für Blogs mit komplexem Design und Unterstützung für den Dunkelmodus.