CCHub Logo CCHub Tailwind Collection
Komponenten OAuth-Schaltflächen OAuth-Schaltflächen-Komponente

OAuth-Schaltflächen-Komponente

Eine reaktionsschnelle OAuth-Schaltflächenkomponente mit einem 3D-Designstil, Unterstützung für dunkle Designs und Platzhalterbildern. Die Komponente verfügt über Schaltflächen für Google, Facebook, Twitter und LinkedIn mit Hover-Effekten für Tiefe und Engagement.

Vorschau

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>

Verwandte Komponenten

OAuth-Schaltflächen-Komponente

Skeuomorphe OAuth-Tasten, die entwickelt wurden, um reale Elemente mit Erdtönen nachzuahmen, die für Social-Media-Schnittstellen gedacht sind.

Offen

OAuth-Schaltflächen-Komponente

Ein Satz OAuth-Tasten mit einem industriellen, erdfarbenen Design, das für Websites von Behörden/öffentlichen Diensten geeignet ist. Verfügt über freiliegende Elemente und zweckmäßige Ästhetik mit voller Reaktionsfähigkeit und Unterstützung des Dunkelmodus.

Offen

OAuth-Schaltflächen-Komponente

Eine komplexe Webkomponente für OAuth-Schaltflächen im Stil von Glasmorphismus und Erdtönen, die für Geschäfts-/Unternehmenswebsites mit Reaktionsfähigkeit und Unterstützung für den Dunkelmodus entwickelt wurde.

Offen