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

Social Share Buttons 구성 요소

glassmorphism 효과로 스타일링된 반응형 소셜 공유 버튼 구성 요소로, 밝은 테마와 어두운 테마를 모두 지원합니다.

미리 보기

HTML 코드 

<div class="flex justify-center items-center p-6 bg-white dark:bg-gray-800 rounded-xl shadow-lg backdrop-blur-lg bg-opacity-30 border border-gray-300 dark:border-gray-600">
    <a href="https://facebook.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=1" alt="Facebook" class="rounded-full">
    </a>
    <a href="https://twitter.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=2" alt="Twitter" class="rounded-full">
    </a>
    <a href="https://linkedin.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=3" alt="LinkedIn" class="rounded-full">
    </a>
    <a href="https://instagram.com" class="flex items-center justify-center h-12 w-12 mx-2 rounded-full bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-700 hover:shadow-lg transition-shadow duration-300 ease-in-out">
        <img src="https://picsum.photos/40/40?random=4" alt="Instagram" class="rounded-full">
    </a>
</div>

<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1F2937;
        }
    }
</style>

관련 구성 요소

레트로 소셜 공유 버튼

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

열다

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

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

열다

소셜 공유 버튼

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

열다