Pulsanti RetroOAuth
Un semplice componente di pulsanti OAuth a tema retrò con una combinazione di colori triadica, ideale per un sito portfolio. Presenta un design reattivo e il supporto per la modalità oscura, che ricorda l'estetica degli anni '80/'90.
Codice HTML
<div class="flex flex-col items-center justify-center min-h-screen p-4 bg-lime-100 dark:bg-zinc-900 transition-colors duration-300">
<div class="w-full max-w-sm p-6 rounded-lg shadow-xl bg-orange-200 dark:bg-violet-900 border-4 border-lime-500 dark:border-orange-500 transform -skew-x-3 rotate-1 transition-all duration-300">
<h2 class="text-center text-3xl font-extrabold text-lime-800 dark:text-lime-200 mb-6 font-mono tracking-widest uppercase animate-pulse-text">ACCESS GRANTED</h2>
<div class="space-y-4">
<button class="flex items-center justify-center w-full px-5 py-3 border-2 border-lime-600 dark:border-lime-200 text-lime-800 dark:text-lime-200 text-lg font-bold rounded-lg shadow-md bg-orange-400 dark:bg-lime-800 hover:bg-lime-400 dark:hover:bg-orange-600 transform hover:scale-105 transition-all duration-200 group relative overflow-hidden">
<span class="absolute inset-0 bg-lime-500 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></span>
<svg class="w-6 h-6 mr-3 text-orange-900 dark:text-orange-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.07 18h-2.93v-8.001h2.93v8.001zm-1.464-9.351c-.966 0-1.75-.783-1.75-1.75s.784-1.75 1.75-1.75 1.75.783 1.75 1.75-.784 1.75-1.75 1.75zm12.464 9.351h-3.04v-4.996c0-.987-.45-1.472-1.077-1.473-.591 0-1.026.398-1.189.771-.16.368-.171.86-.171 1.055v4.643h-2.93v-8.001h2.93v1.272c.38-.601 1.057-.991 1.782-.991 1.344 0 2.383.882 2.383 2.766v4.954z"/>
</svg>
LOGIN WITH GIT
</button>
<button class="flex items-center justify-center w-full px-5 py-3 border-2 border-lime-600 dark:border-lime-200 text-lime-800 dark:text-lime-200 text-lg font-bold rounded-lg shadow-md bg-orange-400 dark:bg-lime-800 hover:bg-lime-400 dark:hover:bg-orange-600 transform hover:scale-105 transition-all duration-200 group relative overflow-hidden">
<span class="absolute inset-0 bg-lime-500 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></span>
<svg class="w-6 h-6 mr-3 text-orange-900 dark:text-orange-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.07 18h-2.93v-8.001h2.93v8.001zm-1.464-9.351c-.966 0-1.75-.783-1.75-1.75s.784-1.75 1.75-1.75 1.75.783 1.75 1.75-.784 1.75-1.75 1.75zm12.464 9.351h-3.04v-4.996c0-.987-.45-1.472-1.077-1.473-.591 0-1.026.398-1.189.771-.16.368-.171.86-.171 1.055v4.643h-2.93v-8.001h2.93v1.272c.38-.601 1.057-.991 1.782-.991 1.344 0 2.383.882 2.383 2.766v4.954z"/>
</svg>
LOGIN WITH BOOK
</button>
<button class="flex items-center justify-center w-full px-5 py-3 border-2 border-lime-600 dark:border-lime-200 text-lime-800 dark:text-lime-200 text-lg font-bold rounded-lg shadow-md bg-orange-400 dark:bg-lime-800 hover:bg-lime-400 dark:hover:bg-orange-600 transform hover:scale-105 transition-all duration-200 group relative overflow-hidden">
<span class="absolute inset-0 bg-lime-500 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></span>
<svg class="w-6 h-6 mr-3 text-orange-900 dark:text-orange-200" fill="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path d="M12 0c-6.627 0-12 5.373-12 12s5.373 12 12 12 12-5.373 12-12-5.373-12-12-12zm-2.07 18h-2.93v-8.001h2.93v8.001zm-1.464-9.351c-.966 0-1.75-.783-1.75-1.75s.784-1.75 1.75-1.75 1.75.783 1.75 1.75-.784 1.75-1.75 1.75zm12.464 9.351h-3.04v-4.996c0-.987-.45-1.472-1.077-1.473-.591 0-1.026.398-1.189.771-.16.368-.171.86-.171 1.055v4.643h-2.93v-8.001h2.93v1.272c.38-.601 1.057-.991 1.782-.991 1.344 0 2.383.882 2.383 2.766v4.954z"/>
</svg>
LOGIN WITH SPACE
</button>
</div>
<p class="text-center text-sm text-lime-700 dark:text-violet-300 mt-6 font-sans italic">Prepare for System Initialization</p>
</div>
</div>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
Componente Glassmorphism OAuth Buttons con effetti reattivi e supporto per temi scuri.
Componente Pulsanti OAuth
Un componente pulsanti OAuth reattivo progettato in modalità scura utilizzando Tailwind CSS, con sfondi scuri ed elementi dell'interfaccia utente ottimizzati per ambienti con scarsa illuminazione.