Компоненты Кнопка «Подписаться» Компонент кнопки «Следовать»

Компонент кнопки «Следовать»

Адаптивный компонент кнопки «Подписаться/отписаться», подходящий для веб-сайтов мероприятий и конференций, с градиентными переходами, поддержкой темного режима и ярким акцентным цветом. Он включает в себя тонкий эффект наведения и меняет текст и фон по клику (симулируется).

Предварительный просмотр

HTML-код

<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-[150px]">
  <button class="follow-button group relative overflow-hidden px-6 py-2 rounded-full font-semibold text-lg transition-all duration-300 ease-out shadow-md
    bg-gradient-to-r from-red-500 to-purple-600 
    hover:from-purple-600 hover:to-red-500 
    text-white dark:text-gray-100
    focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-red-800">
    <span class="relative z-10 block transition-transform duration-300 ease-in-out group-hover:scale-105" data-text-initial="Follow" data-text-followed="Following">Follow</span>
    <span class="absolute inset-0 bg-white opacity-0 transition-opacity duration-300 ease-out group-hover:opacity-10 pointer-events-none"></span>
  </button>

  <script>
    document.addEventListener('DOMContentLoaded', () => {
      const button = document.querySelector('.follow-button');
      const buttonText = button.querySelector('span[data-text-initial]');

      let isFollowing = false;

      button.addEventListener('click', () => {
        isFollowing = !isFollowing;

        if (isFollowing) {
          buttonText.textContent = buttonText.dataset.textFollowed;
          button.classList.remove('from-red-500', 'to-purple-600', 'hover:from-purple-600', 'hover:to-red-500');
          button.classList.add('from-gray-400', 'to-gray-500', 'dark:from-gray-700', 'dark:to-gray-800', 'hover:from-gray-500', 'hover:to-gray-400', 'dark:hover:from-gray-800', 'dark:hover:to-gray-700',
          'text-gray-800', 'dark:text-gray-200');
          button.classList.remove('text-white', 'dark:text-gray-100');
        } else {
          buttonText.textContent = buttonText.dataset.textInitial;
          button.classList.remove('from-gray-400', 'to-gray-500', 'dark:from-gray-700', 'dark:to-gray-800', 'hover:from-gray-500', 'hover:to-gray-400', 'dark:hover:from-gray-800', 'dark:hover:to-gray-700',
          'text-gray-800', 'dark:text-gray-200');
          button.classList.add('from-red-500', 'to-purple-600', 'hover:from-purple-600', 'hover:to-red-500',
          'text-white', 'dark:text-gray-100');
        }
      });
    });
  </script>
</div>

Связанные компоненты

Кнопка «Подписаться» с микровзаимодействиями

Адаптивный компонент кнопки «Подписаться» с поддержкой темной темы и микровзаимодействиями, разработанный для приложений социальных сетей с использованием Tailwind CSS. Отличается монохроматической цветовой гаммой и сложными интерактивными элементами.

Открытый