Follow Button 구성 요소
부동산 플랫폼용으로 설계된 반응형 '팔로우' 버튼 구성 요소로, 기업용 파란색 색 구성표, 다크 모드 지원 및 미묘한 대화형 호버 효과를 특징으로 합니다.
HTML 코드
<div class="flex items-center justify-center p-4 bg-gray-100 dark:bg-gray-900 min-h-screen">
<button class="relative flex items-center justify-center px-6 py-2 overflow-hidden font-semibold text-white transition-all duration-300 ease-in-out bg-blue-600 rounded-lg group shadow-lg dark:bg-blue-700 dark:shadow-blue-900/50 hover:shadow-xl hover:scale-105 active:scale-95 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500 dark:focus:ring-offset-gray-900">
<span class="relative z-10 text-base group-hover:text-white transition-colors duration-200">
Follow
</span>
<svg class="absolute w-0 h-0 transition-all duration-300 ease-in-out transform -translate-x-full opacity-0 group-hover:opacity-100 group-hover:w-6 group-hover:h-6 group-hover:translate-x-0 group-hover:text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17 8l4 4m0 0l-4 4m4-4H3"></path>
</svg>
<span class="absolute top-0 left-0 w-full h-full bg-gradient-to-r from-blue-700 to-blue-500 rounded-lg opacity-0 transition-opacity duration-300 ease-in-out group-hover:opacity-100"></span>
</button>
</div>관련 구성 요소
Follow Button 컴포넌트 - 고정공간/개발자 스타일
뉴스/저널리즘 웹사이트를 위해 설계된 복잡한 대화형 팔로우 버튼 구성 요소로, 보석 색조의 모노스페이스/개발자 미학과 다크 모드 지원을 포함한 완전한 응답성을 특징으로 합니다.
Follow Button 구성 요소
깔끔하고 미니멀한 '팔로우' 버튼은 레트로/빈티지 색상 팔레트로 디자인되어 대시보드 또는 프로필 페이지에 적합합니다. 대화형 호버 상태와 다크 모드 지원을 특징으로 하며 스위스/국제 타이포그래피 원칙을 구현합니다.