CCHub Logo CCHub Tailwind Collection
구성 요소 OAuth 버튼 OAuth 버튼 구성 요소

OAuth 버튼 구성 요소

3D 디자인 스타일, 어두운 테마 지원 및 자리 표시자 이미지가 있는 반응형 OAuth 버튼 구성 요소입니다. 이 구성 요소에는 Google, Facebook, Twitter 및 LinkedIn용 버튼이 있으며, 깊이와 참여를 위한 호버 효과가 있습니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900">
    <h1 class="text-2xl font-bold mb-6 text-gray-800 dark:text-gray-200">Sign in with</h1>
    <div class="space-y-4">
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-600 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-500 dark:bg-blue-700 dark:hover:bg-blue-600">
            <img src="https://picsum.photos/20/20?random=1" alt="Google" class="rounded-full mr-2" />
            Google
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-700 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-600 dark:bg-blue-800 dark:hover:bg-blue-700">
            <img src="https://picsum.photos/20/20?random=2" alt="Facebook" class="rounded-full mr-2" />
            Facebook
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-500 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-400 dark:bg-blue-600 dark:hover:bg-blue-500">
            <img src="https://picsum.photos/20/20?random=3" alt="Twitter" class="rounded-full mr-2" />
            Twitter
        </a>
        <a href="#" class="flex items-center justify-center w-64 px-4 py-2 text-white bg-blue-900 rounded-lg shadow-lg transform transition-all hover:-translate-y-1 hover:shadow-2xl hover:bg-blue-800 dark:bg-blue-900 dark:hover:bg-blue-800">
            <img src="https://picsum.photos/20/20?random=4" alt="LinkedIn" class="rounded-full mr-2" />
            LinkedIn
        </a>
    </div>
</div>
<style>
    @media (prefers-color-scheme: dark) {
        body {
            background-color: #1a1a1a;
            color: #ffffff;
        }
    }
</style>

관련 구성 요소

OAuth 버튼 구성 요소

OAuth 로그인 버튼을 표시하기 위한 간단하고 깔끔하며 미니멀한 구성 요소로, 스위스/국제 타이포그래피 디자인 원칙을 준수합니다. 밝은 액센트 색상, 완전한 응답성 및 다크 모드 지원을 갖춘 흑백 단색이 특징이며 문서 또는 Wiki 사이트에 이상적입니다.

열다

OAuth 버튼 구성 요소

포트폴리오에 대한 마이크로 인터랙션이 있는 OAuth 버튼 구성 요소로, 생생한 색 구성표와 단순한 레이아웃을 특징으로 하며, 반응형 디자인과 Tailwind CSS를 사용한 다크 모드 지원을 제공합니다.

열다

OAuth 버튼 구성 요소

정부/공공 서비스 웹 사이트에 적합한 인더스트리얼 흙색 디자인의 OAuth 버튼 세트입니다. 노출된 요소와 실용적인 미학이 특징이며, 완전한 반응성과 다크 모드를 지원합니다.

열다