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.
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 (modalità scura monocromatica)
Componente pulsanti OAuth reattivi con supporto della modalità oscura utilizzando Tailwind CSS. Utilizza una combinazione di colori monocromatica con sfondi scuri.
Componente Pulsanti OAuth
Un set di pulsanti OAuth con un design industriale color terra, adatto per siti Web governativi/di servizio pubblico. Presenta elementi esposti e un'estetica utilitaristica, con piena reattività e supporto per la modalità scura.
Componente Pulsanti OAuth
Un componente Web con pulsanti OAuth con uno stile di progettazione 3D, effetti reattivi, supporto per temi scuri e immagini segnaposto.