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

레트로 소셜 공유 버튼

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

미리 보기

HTML 코드 

<div class="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900" style="font-family: 'Press Start 2P', cursive;">
  <div class="flex space-x-4 p-6 bg-white dark:bg-gray-800 rounded-lg shadow-retro">
    <a href="#" class="share-button facebook">
      <img src="https://img.icons8.com/fluent/48/000000/facebook-new.png" alt="Facebook" class="w-8 h-8">
    </a>
    <a href="#" class="share-button twitter">
      <img src="https://img.icons8.com/fluent/48/000000/twitter.png" alt="Twitter" class="w-8 h-8">
    </a>
    <a href="#" class="share-button instagram">
      <img src="https://img.icons8.com/fluent/48/000000/instagram.png" alt="Instagram" class="w-8 h-8">
    </a>
    <a href="#" class="share-button pinterest">
      <img src="https://img.icons8.com/fluent/48/000000/pinterest.png" alt="Pinterest" class="w-8 h-8">
    </a>
  </div>

  <style>
    @import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');

    .shadow-retro {
        box-shadow: 8px 8px 0px rgba(0, 0, 0, 0.2);
    }

    .dark .shadow-retro {
        box-shadow: 8px 8px 0px rgba(255, 255, 255, 0.2);
    }

    .share-button {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0.75rem;
      border-radius: 0.5rem;
      transition: all 0.3s ease;
      border: 2px solid #000;
    }

     .dark .share-button {
        border: 2px solid #fff;
     }

    .share-button:hover {
      transform: translateY(-5px);
      box-shadow: 4px 4px 0px rgba(0, 0, 0, 0.3);
    }

    .dark .share-button:hover {
        box-shadow: 4px 4px 0px rgba(255, 255, 255, 0.3);
    }

    .facebook {
      background-color: #4267B2;
    }
    .twitter {
      background-color: #1DA1F2;
    }
    .instagram {
      background-color: #E1306C;
    }
    .pinterest {
      background-color: #BD081C;
    }
  </style>
</div>

관련 구성 요소

스큐어모픽 소셜 공유 버튼

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

열다

Social Share Buttons 구성 요소

다크 모드 UI를 위한 소셜 공유 버튼 구성 요소는 포트폴리오 목적, 어두운 테마를 지원하는 반응형 디자인을 위해 Tailwind CSS, 회색조 색 구성표, 단순한 복잡성을 사용합니다.

열다

소셜 공유 버튼 구성 요소 51

스큐어모픽 디자인 원칙에 따라 설계된 반응형 소셜 공유 버튼 구성 요소로, 실제 객체를 모방하고 어두운 테마를 지원하는 버튼이 특징입니다. 구성 요소는 Tailwind CSS를 사용하여 스타일이 지정되며 picsum.photos의 자리 표시자 이미지와 randomuser.me 의 아바타를 포함합니다.

열다