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

소셜 공유 버튼

반응형 소셜 공유 버튼 구성 요소는 어두운 테마 지원, 브루탈리즘 디자인, 유사한 색 구성표 및 복잡한 상호 작용을 제공하며 포트폴리오 웹 사이트를 위해 Tailwind CSS로 구축되었습니다.

미리 보기

HTML 코드 

<div class="bg-gray-100 dark:bg-gray-900 p-8 min-h-screen flex items-center justify-center">
  <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8">

    <!-- Social Share Button 1 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-yellow-500 text-3xl">
          <i class="fab fa-twitter"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Twitter</h3>
          <p class="text-gray-600 dark:text-gray-400">Spread the word!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-yellow-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Tweet
      </button>
    </div>

    <!-- Social Share Button 2 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-orange-500 text-3xl">
          <i class="fab fa-facebook-f"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Facebook</h3>
          <p class="text-gray-600 dark:text-gray-400">Connect with friends!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-orange-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Share
      </button>
    </div>

    <!-- Social Share Button 3 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-red-500 text-3xl">
          <i class="fab fa-pinterest-p"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on Pinterest</h3>
          <p class="text-gray-600 dark:text-gray-400">Inspire others!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-red-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Pin It
      </button>
    </div>

    <!-- Social Share Button 4 -->
    <div class="bg-white dark:bg-gray-800 border-4 border-black dark:border-white p-6 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff] transform transition-transform duration-200 hover:scale-105">
      <div class="flex items-center space-x-4">
        <div class="text-blue-500 text-3xl">
          <i class="fab fa-linkedin-in"></i>
        </div>
        <div>
          <h3 class="text-xl font-bold text-gray-900 dark:text-white">Share on LinkedIn</h3>
          <p class="text-gray-600 dark:text-gray-400">Grow your network!</p>
        </div>
      </div>
      <button class="mt-6 w-full bg-blue-500 text-black py-3 px-4 border-2 border-black dark:border-white font-bold text-lg transform translate-x-1 translate-y-1 shadow-[4px_4px_0_0_#000] dark:shadow-[4px_4px_0_0_#fff] hover:translate-x-0 hover:translate-y-0 hover:shadow-none transition-all duration-200">
        Connect
      </button>
    </div>

  </div>
</div>

관련 구성 요소

레트로 소셜 공유 버튼

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

열다

스큐어모픽 소셜 공유 버튼

Tailwind CSS를 사용하여 스큐어모픽 디자인으로 스타일링된 소셜 공유 버튼 세트입니다. 그라데이션, 그림자 및 호버/활성 효과를 제공하여 물리적 버튼을 시뮬레이션합니다. 구성 요소는 반응형이며 CSS를 통한 다크 모드 지원을 포함합니다. Facebook, Twitter, LinkedIn 및 일반 링크 복사 버튼에 대한 버튼이 포함되어 있습니다.

열다

Social Share Buttons 구성 요소

블로그 콘텐츠 소비를 위해 회색조의 스큐어모픽 스타일로 설계된 반응형 소셜 공유 버튼 구성 요소입니다. 다크 모드 지원이 포함됩니다.

열다