마이크로 인터랙션을 통한 Follow Button
어두운 테마를 지원하고 마이크로 인터랙션을 제공하는 반응형 Follow Button 구성 요소로, Tailwind CSS를 사용하는 소셜 미디어 애플리케이션용으로 설계되었습니다. 단색 색 구성표와 복잡한 상호 작용 요소가 특징입니다.
HTML 코드
<div class="flex items-center justify-center h-screen bg-gray-100 dark:bg-gray-900">
<div class="relative inline-block group">
<button class="px-6 py-3 text-sm font-semibold text-white bg-blue-600 rounded-full transition-all duration-300 ease-in-out transform group-hover:scale-105 group-active:scale-95 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:bg-blue-700 dark:group-hover:bg-blue-600 dark:focus:ring-blue-600">
Follow
</button>
<div class="absolute inset-0 rounded-full bg-blue-500 opacity-0 blur transition-all duration-500 ease-in-out group-hover:opacity-70"></div>
</div>
</div>