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

OAuth 버튼 구성 요소

매력적인 애니메이션과 흙색 색상으로 디자인된 반응형 OAuth 버튼 구성 요소로, 소셜 미디어 인터페이스에 적합하고 어두운 테마를 지원합니다.

미리 보기

HTML 코드 

<div class="flex flex-col items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
    <h2 class="text-2xl font-bold text-green-700 dark:text-green-400 mb-4 animate-pulse">Sign in with</h2>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-brown-600 rounded-lg shadow-md hover:shadow-lg dark:bg-brown-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/11.jpg" alt="Google Logo" class="w-6 h-6 rounded-full mr-2" />
        Google
    </button>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-blue-600 rounded-lg shadow-md hover:shadow-lg dark:bg-blue-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/26.jpg" alt="Facebook Logo" class="w-6 h-6 rounded-full mr-2" />
        Facebook
    </button>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-gray-700 rounded-lg shadow-md hover:shadow-lg dark:bg-gray-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/men/20.jpg" alt="Twitter Logo" class="w-6 h-6 rounded-full mr-2" />
        Twitter
    </button>
    <button class="flex items-center justify-center w-full max-w-xs p-3 mb-4 text-white bg-orange-600 rounded-lg shadow-md hover:shadow-lg dark:bg-orange-800 transition ease-in-out duration-300 transform hover:scale-105">
        <img src="https://randomuser.me/api/portraits/women/12.jpg" alt="GitHub Logo" class="w-6 h-6 rounded-full mr-2" />
        GitHub
    </button>
</div>

관련 구성 요소

OAuth 버튼 구성 요소

스큐어모픽 스타일로 디자인된 OAuth 버튼, 반응형 효과, Tailwind CSS를 사용한 어두운 테마 지원을 특징으로 하는 웹 컴포넌트입니다.

열다

OAuth 버튼 구성 요소

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

열다

OAuth 버튼 구성 요소

블로그 또는 콘텐츠 소비 플랫폼용으로 설계된 Neumorphism 스타일의 OAuth Buttons 구성 요소입니다. 이 구성 요소에는 반응형 디자인, 어두운 테마 지원 및 단색 색 구성표를 갖춘 다양한 OAuth 공급자용 버튼이 있습니다.

열다