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
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.
Componente Pulsanti OAuth
Un componente web complesso per pulsanti OAuth con glassmorphism e toni della terra, progettato per siti web aziendali/aziendali con supporto per reattività e modalità scura.
Componente Pulsanti OAuth
Un set di pulsanti OAuth progettati con un'estetica brutalista e Tailwind CSS, con effetti reattivi e supporto per temi scuri.