Componenti Pulsanti OAuth Componente Pulsanti OAuth

Componente Pulsanti OAuth

Un componente pulsanti OAuth reattivo con uno stile di progettazione 3D, supporto per temi scuri e immagini segnaposto. Il componente presenta pulsanti per Google, Facebook, Twitter e LinkedIn, con effetti al passaggio del mouse per profondità e coinvolgimento.

Anteprima

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

Componenti correlati

Componente Pulsanti OAuth

Un componente Web per i pulsanti di autenticazione OAuth con stile neumorfismo, progettato per un portfolio e include un layout reattivo con supporto per il tema scuro.

Aperto

Componente Pulsanti OAuth

Un componente web con pulsanti OAuth progettati con uno stile scheumorfico, effetti reattivi e supporto per temi scuri utilizzando Tailwind CSS.

Aperto

Componente Pulsanti OAuth

Componente pulsanti OAuth a tema retrò / vintage / anni '80 / 90 con combinazione di colori analoga, complessità moderata, per social media, design reattivo con supporto per la modalità oscura. Niente JS, solo HTML con le classi Tailwind.

Aperto