구성 요소 팔로우 버튼 Glassmorphism 팔로우 버튼

Glassmorphism 팔로우 버튼

어두운 테마의 소셜 미디어를 위한 Glassmorphism Follow Button 구성 요소

미리 보기

HTML 코드

<div class="flex items-center justify-center min-h-screen bg-gradient-to-br from-blue-500 to-purple-600 dark:from-gray-800 dark:to-gray-900">
  <div class="bg-white bg-opacity-10 backdrop-filter backdrop-blur-lg rounded-xl p-6 shadow-lg border border-gray-100 border-opacity-20 dark:bg-gray-700 dark:bg-opacity-10 dark:border-gray-600 dark:border-opacity-20">
    <div class="flex items-center space-x-4">
      <img class="w-12 h-12 rounded-full object-cover" src="https://randomuser.me/api/portraits/men/32.jpg" alt="User Avatar">
      <div>
        <h3 class="text-lg font-semibold text-white dark:text-gray-200">John Doe</h3>
        <p class="text-sm text-gray-200 dark:text-gray-400">@johndoe</p>
      </div>
      <button class="ml-auto px-6 py-2 bg-blue-500 text-white font-semibold rounded-full hover:bg-blue-600 transition duration-300 ease-in-out transform hover:scale-105 dark:bg-blue-600 dark:hover:bg-blue-700">
        Follow
      </button>
    </div>
  </div>
</div>

관련 구성 요소

Follow Button 구성 요소

유리 형태 스타일과 생생한 색상을 갖춘 복잡하고 반응이 빠른 팔로우 버튼 구성 요소로, Tailwind CSS를 사용하여 다크 모드를 지원하는 비즈니스 웹 사이트를 위해 설계되었습니다.

열다

Follow Button 컴포넌트 - 고정공간/개발자 스타일

뉴스/저널리즘 웹사이트를 위해 설계된 복잡한 대화형 팔로우 버튼 구성 요소로, 보석 색조의 모노스페이스/개발자 미학과 다크 모드 지원을 포함한 완전한 응답성을 특징으로 합니다.

열다

Follow Button 구성 요소

어두운 테마를 지원하는 대시보드를 위한 Neumorphism 스타일의 Follow Button.

열다