CCHub Logo CCHub Tailwind Collection
구성 요소 소셜 공유 버튼 Social Share Buttons 구성 요소

Social Share Buttons 구성 요소

다크 모드를 지원하는 대시보드를 위한 간단하고 반응이 빠른 3D 그레이스케일 소셜 공유 버튼 구성 요소입니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
  <div class="grid grid-cols-2 sm:grid-cols-4 gap-4 p-4">
    <!-- Facebook -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">F</div>
    </a>
    
    <!-- Twitter -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">T</div>
    </a>
    
    <!-- LinkedIn -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">in</div>
    </a>
    
    <!-- Instagram -->
    <a href="#" class="relative flex items-center justify-center p-4 bg-gray-300 dark:bg-gray-700 rounded-lg shadow-lg transform transition-transform duration-300 hover:scale-105 group">
      <div class="absolute inset-0 bg-gray-400 dark:bg-gray-600 rounded-lg transform translate-x-1 translate-y-1 group-hover:translate-x-0 group-hover:translate-y-0 transition-transform duration-300"></div>
      <div class="relative text-gray-800 dark:text-gray-200 font-bold text-2xl z-10">I</div>
    </a>
  </div>
</div>

관련 구성 요소

레트로 소셜 공유 버튼

레트로/빈티지 디자인, 반응형 효과 및 Tailwind CSS를 사용하는 어두운 테마 지원이 있는 소셜 공유 버튼 구성 요소, JavaScript가 필요하지 않습니다.

열다

Social Share Buttons 구성 요소

반응형 소셜 공유 버튼 구성 요소는 실제 세계를 모방한 스큐어모픽 디자인 스타일을 사용하며 어두운 테마를 지원합니다.

열다

스큐어모픽 소셜 공유 버튼

반응형 소셜 공유 버튼 구성 요소에는 스큐어모픽 디자인, 단색 색 구성표 및 복잡한 상호 작용이 있으며 어두운 테마가 지원됩니다. 블로그 및 콘텐츠 사이트용으로 설계되었습니다.

열다