Follow Button 구성 요소
이벤트 및 컨퍼런스 웹 사이트에 적합한 반응형 팔로우/언팔로우 버튼 구성 요소로, 그라디언트 전환, 다크 모드 지원 및 밝은 강조 색상을 특징으로 합니다. 여기에는 미묘한 호버 효과가 포함되어 있으며 클릭 시 텍스트와 배경이 변경됩니다(시뮬레이션됨).
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>