Boutons de réaction skeuomorphe
Un ensemble de boutons J’aime et de réaction avec un style de conception Skeuomorphique, prenant en charge les mises en page réactives et le mode sombre. Les boutons sont implémentés uniquement avec HTML et Tailwind CSS, sans JavaScript. Le mode sombre est géré via les classes CSS. Les images de remplacement sont utilisées pour les avatars.
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>Composants associés
Composant Like/Reaction Buttons
Un composant 3D Design Like/Reaction Buttons utilisant Tailwind CSS avec prise en charge du thème sombre et effets réactifs.
Composant Like/Reaction Buttons
Un composant web complexe caractérisé par un morphisme en verre avec des éléments translucides et des effets de flou. Il comprend plusieurs éléments interactifs conçus pour les sites Web d’entreprise, prenant en charge le mode sombre.