Botones de reacción skeuomórfica
Un conjunto de botones de "me gusta" y "reacción" con un estilo de diseño skeuomórfico, que admite diseños responsivos y modo oscuro. Los botones se implementan puramente con HTML y Tailwind CSS, sin JavaScript. El modo oscuro se maneja a través de clases CSS. Las imágenes de marcador de posición se utilizan para los avatares.
Código HTML
<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>Componentes relacionados
Botones Me gusta/Reacción
Componente de botones Me gusta/Reacción con microinteracciones, capacidad de respuesta y compatibilidad con temas oscuros
CyberpunkLikeReactionButtons
Un componente de botones de me gusta/reacción simple y receptivo para un mercado, con una estética cyberpunk con tonos azul océano y soporte para modo oscuro.
Componente de botones Me gusta/Reacción
Un componente de botones de Me gusta / Reacción receptivo con soporte de modo oscuro usando Tailwind CSS. Cuenta con un esquema de color complementario adecuado para un tablero, con una complejidad moderada para botones de reacción interactivos.