Skeuomorphe Reaktionsknöpfe
Eine Reihe von "Gefällt mir"- und Reaktionsschaltflächen mit einem Skeuomorphen Designstil, der responsive Layouts und den Dunkelmodus unterstützt. Die Buttons sind rein mit HTML und Tailwind CSS umgesetzt, ohne JavaScript. Der Dunkelmodus wird über CSS-Klassen behandelt. Platzhalterbilder werden für Avatare verwendet.
HTML-Code
<style>
.skeuomorphic {
background-color: #e0e0e0;
box-shadow: 7px 7px 15px #bebebe, -7px -7px 15px #ffffff;
border-radius: 10px;
padding: 10px;
}
.skeuomorphic:active {
box-shadow: inset 7px 7px 15px #bebebe, inset -7px -7px 15px #ffffff;
}
.dark .skeuomorphic {
background-color: #333;
box-shadow: 7px 7px 15px #222, -7px -7px 15px #444;
}
.dark .skeuomorphic:active {
box-shadow: inset 7px 7px 15px #222, inset -7px -7px 15px #444;
}
</style>
<div class="flex justify-center items-center space-x-4 p-6 bg-gray-100 dark:bg-black">
<div class="flex space-x-4 skeuomorphic dark:skeuomorphic">
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M14 10h4.764a2 2 0 011.789 2.894l-3.5 7A2 2 0 0115.263 21c-.64-.149-1.28-.293-1.92-.434L13 18H4a2 2 0 01-2-2V6a2 2 0 012-2h10a2 2 0 012 2v4zm-2 0h2"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Like</span>
</button>
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Love</span>
</button>
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M14.828 14.828a4 4 0 01-5.656 0M9 21v-6a2 2 0 012-2h2a2 2 0 012 2v6m-6 0h6"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Haha</span>
</button>
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M18.364 18.364A9 9 0 005.636 5.636m12.728 12.728A9 9 0 015.636 5.636m12.728 12.728L5.636 5.636"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Wow</span>
</button>
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Sad</span>
</button>
<button class="flex items-center space-x-1 p-2 skeuomorphic dark:skeuomorphic">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 text-gray-500 dark:text-gray-300"
fill="none"
viewBox="0 0 24 24"
stroke="currentColor"
>
<path
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
></path>
</svg>
<span class="text-gray-700 dark:text-gray-300">Angry</span>
</button>
</div>
</div>Verwandte Komponenten
NeumorphismLikeReactionButtons
Responsive Like/Reaction Buttons Komponente für Blog/Inhalte mit Unterstützung für dunkle Themen und Neumorphism-Design.
Komponente "Gefällt mir/Reaktions-Buttons"
Eine Komponente für Like/Reaction-Schaltflächen im Retro-/Vintage-Stil mit einer Reihe interaktiver Schaltflächen für Reaktionen mit Unterstützung für dunkle Themen und responsivem Design. Diese Komponente eignet sich für ein Dashboard, das es Benutzern ermöglicht, auf verschiedene Elemente in der Benutzeroberfläche zu reagieren.
Like-/Reaction-Schaltflächen
Like/Reaction Buttons-Komponente mit Brutalismus-Design, Erdtönen, komplexen Interaktionen, reaktionsschneller, dunkler Themenunterstützung.. Kein JS, reines HTML mit Tailwind.