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

Social Share Buttons 구성 요소

Glassmorphism 스타일과 생생한 색상의 반응형 소셜 공유 버튼은 블로그 및 콘텐츠 소비를 위해 설계되었습니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center p-5 bg-white bg-opacity-30 rounded-lg shadow-lg backdrop-blur-lg dark:bg-gray-800 dark:bg-opacity-40">
    <h2 class="text-lg font-semibold text-gray-800 dark:text-white mb-4">Share this Post</h2>
    <div class="flex space-x-4">
        <a href="#" class="flex items-center justify-center p-3 bg-red-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on Facebook">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="Facebook">
            <span class="text-white ml-2">Facebook</span>
        </a>
        <a href="#" class="flex items-center justify-center p-3 bg-blue-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on Twitter">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="Twitter">
            <span class="text-white ml-2">Twitter</span>
        </a>
        <a href="#" class="flex items-center justify-center p-3 bg-purple-500 rounded-full shadow-lg transform hover:scale-105 transition-transform duration-200"
           aria-label="Share on LinkedIn">
            <img src="https://picsum.photos/30/30" class="h-8 w-8 rounded-full" alt="LinkedIn">
            <span class="text-white ml-2">LinkedIn</span>
        </a>
    </div>
</div>

관련 구성 요소

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

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

열다

스큐어모픽 어스 톤 소셜 공유 버튼

어스 톤을 사용한 스큐어모픽 디자인으로 스타일링된 소셜 공유 버튼 세트입니다. 기능에는 순전히 HTML 및 Tailwind CSS 클래스로 구축된 호버 시 대화형 누름 효과를 통한 반응형 레이아웃 및 다크 모드 지원이 포함됩니다.

열다

Social Share Buttons 구성 요소

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

열다