Кнопки «Нравится»/«Реакция»
Компонент кнопок «Нравится»/«Реакция» с микровзаимодействиями, дополнительная цветовая схема, простая сложность, для социальных сетей.
HTML-код
<div class="flex items-center justify-center space-x-4">
<!-- Light mode: Like button -->
<button class="flex items-center space-x-1 text-blue-600 dark:text-blue-400 focus:outline-none">
<svg class="h-5 w-5" 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 21h-4.017c-.381 0-.74-.15-.988-.427l-2.593-3.017A1.5 1.5 0 016 15.25V10H4a2 2 0 00-2 2v5a2 2 0 002 2h2.598a2 2 0 011.665.879l1.212 1.5A2 2 0 0010 21h.828c.317 0 .609-.117.856-.309l3.975-3.854A2 2 0 0118.113 15H22V4a2 2 0 00-2-2h-6a2 2 0 00-2 2v6zM14 10V4h-4v6m0 0H9m5 0a2 2 0 110 4m0-4a2 2 0 100 4m0 0c1.272 0 2.424.41 3.374 1.184C16.168 10.69 17 8.56 17 6.5 17 4.56 16.168 2.43 14.816 1.184A2 2 0 0014 2z"/>
</svg>
<span>Like</span>
</button>
<!-- Dark mode: Like button -->
<button class="flex items-center space-x-1 text-gray-400 dark:text-gray-600 dark:hover:text-blue-400 focus:outline-none">
<svg class="h-5 w-5" 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 21h-4.017c-.381 0-.74-.15-.988-.427l-2.593-3.017A1.5 1.5 0 016 15.25V10H4a2 2 0 00-2 2v5a2 2 0 002 2h2.598a2 2 0 011.665.879l1.212 1.5A2 2 0 0010 21h.828c.317 0 .609-.117.856-.309l3.975-3.854A2 2 0 0118.113 15H22V4a2 2 0 00-2-2h-6a2 2 0 00-2 2v6zM14 10V4h-4v6m0 0H9m5 0a2 2 0 110 4m0-4a2 2 0 100 4m0 0c1.272 0 2.424.41 3.374 1.184C16.168 10.69 17 8.56 17 6.5 17 4.56 16.168 2.43 14.816 1.184A2 2 0 0014 2z"/>
</svg>
<span>Like</span>
</button>
<button class="flex items-center space-x-1 text-red-600 dark:text-red-400 focus:outline-none">
<svg class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20.84 4.61a5.5 5.5 0 00-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 00-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 000-7.78z"/>
</svg>
<span>Love</span>
</button>
</div>Связанные компоненты
Кнопки «Нравится»/«Реакция»
Компонент кнопок "Нравится/Реакция" с микровзаимодействиями, отзывчивостью и поддержкой темных тем
Кнопки «Нравится»/«Реакция»
Компонент кнопок "Нравится/Реакция" с дизайном брутализма, земляными тонами, сложными взаимодействиями, отзывчивостью, поддержкой темных тем.. Никакого JS, чистый HTML с Tailwind.
Компонент кнопок "Нравится/Реакция"
Ретро/винтажный компонент кнопок «Нравится»/«Реакция», разработанный для корпоративных сайтов, с земляными тонами и адаптивным дизайном с поддержкой темного режима.