구성 요소 팔로우 버튼 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 구성 요소

브루탈리즘 스타일로 디자인된 팔로우 버튼 구성 요소는 높은 대비와 생생하고 대담한 외관을 가지고 있습니다. 반응형이며 어두운 테마를 지원합니다.

열다

머티리얼 디자인 팔로우 버튼

반응형, 단색의 Material Design 팔로우 버튼 구성 요소로, 다크 모드를 지원합니다.

열다

브루탈리스트팔로우버튼

반응형 및 다크 모드를 지원하는 브루탈리스트 팔로우 버튼입니다.

열다