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

Social Share Buttons 구성 요소

소셜 공유 버튼 구성 요소에는 Brutalism 디자인, 생생한 색 구성표 및 전자 상거래를 위한 복잡한 복잡성 수준이 있으며 Tailwind CSS를 사용하여 반응형 디자인 및 어두운 테마를 지원합니다. 자바스크립트가 없습니다.

미리 보기

HTML 코드 

<div class="bg-yellow-400 p-6 min-h-screen flex items-center justify-center dark:bg-gray-900">
  <div class="flex flex-wrap space-x-4">
    <!-- Share Button 1 -->
    <button class="bg-red-600 hover:bg-red-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-red-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-red-500">
      Share on X
    </button>

    <!-- Share Button 2 -->
    <button class="bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-blue-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-blue-500">
      Share on Facebook
    </button>

    <!-- Share Button 3 -->
    <button class="bg-green-600 hover:bg-green-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-green-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-green-500">
      Share on LinkedIn
    </button>

    <!-- Share Button 4 -->
    <button class="bg-purple-600 hover:bg-purple-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-purple-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-purple-500">
      Share on Pinterest
    </button>

    <!-- Share Button 5 -->
    <button class="bg-pink-600 hover:bg-pink-700 text-white font-bold py-3 px-6 rounded-none border-4 border-black dark:bg-pink-800 dark:border-white transform transition duration-300 hover:scale-110 focus:outline-none focus:ring-4 focus:ring-pink-500">
      Copy Link
    </button>
  </div>
</div>

관련 구성 요소

Social Share Buttons 구성 요소

소셜 공유 버튼: Tailwind CSS를 사용하는 다크 모드의 전자 상거래를 위한 구성 요소입니다. 단순하고 반응이 빠르며 회색조입니다.

열다

소셜 공유 버튼

Neumorphism 스타일, 단색 색 구성표 및 비즈니스/기업 웹사이트를 위한 단순 복잡성을 갖춘 소셜 공유 버튼. Tailwind CSS를 사용하여 어두운 테마를 지원하는 반응형 디자인. 뉴모픽 효과를 위해 미묘한 그림자를 사용합니다.

열다

소셜 공유 버튼

Social Share Buttons Glassmorphism 디자인, 반응형 효과 및 어두운 테마 지원이 있는 구성 요소. JavaScript는 사용되지 않습니다.

열다