Components OAuth Buttons OAuth Buttons Component

OAuth Buttons Component

A responsive OAuth buttons component with a 3D design style, dark theme support, and placeholder images. The component features buttons for Google, Facebook, Twitter, and LinkedIn, with hover effects for depth and engagement.

Preview

HTML Code

<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>

Related Components

OAuth Buttons Component

A responsive OAuth Buttons Component with Skeuomorphism design, analogous color scheme, and complex interactions, suitable for social media interfaces. Includes dark theme support and uses Tailwind CSS for styling, without JavaScript. Images sourced from Lorem Picsum and RandomUser.me.

Open

OAuth Buttons Component

A responsive OAuth buttons component designed for dark mode with an analogous color scheme, featuring multiple interactive elements for social media.

Open

OAuth Buttons Component

A simple, clean, and minimalist component for displaying OAuth login buttons, adhering to Swiss/International Typography design principles. Features black and white monochrome with a bright accent color, full responsiveness, and dark mode support, ideal for documentation or wiki sites.

Open