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

Social Share Buttons 구성 요소

Tailwind CSS를 사용하여 Brutalism 스타일, 반응형 효과 및 어두운 테마를 지원하는 소셜 공유 버튼 구성 요소입니다.

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-zinc-100 dark:bg-zinc-900 p-8">
  <div class="grid grid-cols-2 md:grid-cols-4 gap-4 border-4 border-zinc-900 dark:border-zinc-100 p-4 bg-white dark:bg-zinc-800 shadow-[8px_8px_0_0_#000] dark:shadow-[8px_8px_0_0_#fff]">
    <button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-blue-500 hover:bg-blue-700 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
      Twitter
    </button>
    <button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-blue-700 hover:bg-blue-900 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
      Facebook
    </button>
    <button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-red-600 hover:bg-red-800 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
      Instagram
    </button>
    <button class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-" class="flex items-center justify-center p-4 font-bold uppercase text-zinc-900 dark:text-zinc-100 bg-blue-900 hover:bg-blue-950 border-2 border-zinc-900 dark:border-zinc-100 transition duration-300 ease-in-out transform hover:translate-x-1 hover:-translate-y-1">
      <svg class="w-6 h-6 mr-2" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true"><path d="M18.244 2.25h3.308l-7.227 8.26 8.502 11.24H16.17l-5.21-" /></svg>
      LinkedIn
    </button>
  </div>
</div>

관련 구성 요소

소셜 공유 버튼 컴포넌트 - 음악/오디오

음악 및 오디오 플랫폼용으로 설계된 소셜 공유 버튼 세트로, 음소거된 색상과 다크 모드를 지원하는 머티리얼 디자인 미학이 특징입니다. Facebook, Twitter 및 이메일과 같은 일반적인 공유 플랫폼용 버튼이 포함되어 있습니다.

열다

Neumorphic Social Share Buttons - 직업/경력 테마

부드러운 뉴모픽 스타일과 경쾌한 캔디 색상으로 디자인된 소셜 공유 버튼 세트로, 구인 게시판이나 커리어 플랫폼에 적합합니다. 반응형 디자인과 다크 모드 지원이 특징입니다.

열다

Social Share Buttons 구성 요소

음식/레스토랑 웹사이트를 위한 반응형 소셜 공유 버튼 구성 요소로, 무지개 그라데이션, 호버링의 미세 상호 작용 및 완전한 다크 모드 지원을 제공합니다.

열다