Componente Pulsanti OAuth
Componente pulsanti OAuth semplice e reattivo con uno stile acquerello/artistico, combinazione di colori neutri freddi, adatto per applicazioni di e-commerce. Include il supporto per la modalità oscura.
Codice HTML
<div class="flex flex-col items-center justify-center p-6 bg-gradient-to-br from-blue-50 to-gray-100 dark:from-gray-800 dark:to-gray-900 min-h-screen font-sans antialiased">
<div class="w-full max-w-sm p-6 rounded-2xl shadow-xl backdrop-blur-sm bg-gradient-to-br from-white/80 to-gray-50/70 dark:from-gray-700/80 dark:to-gray-800/70 border border-gray-200 dark:border-gray-600 transform transition-all duration-300 hover:scale-105">
<h2 class="text-2xl sm:text-3xl font-extrabold text-gray-800 dark:text-white mb-6 text-center tracking-tight leading-tight" style="font-family: 'Georgia', serif;">
Continue Shopping
</h2>
<p class="text-sm text-gray-600 dark:text-gray-300 mb-8 text-center leading-relaxed">
Sign in or create an account to personalize your experience.
</p>
<div class="space-y-4">
<button class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-500 rounded-xl shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-900 group relative overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-blue-100/30 to-white/30 dark:from-gray-500/30 dark:to-gray-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<svg class="w-5 h-5 mr-3" aria-hidden="true" viewBox="0 0 24 24" fill="currentColor">
<path d="M12.24 10.24v3.53h4.63c-.19 1.13-.76 2.39-1.92 3.12-1.28.84-2.73 1.25-4.22 1.25-3.3 0-6.1-1.78-7.58-4.44C-.03 11.23-.42 8.78.36 6.55c.78-2.23 2.51-3.83 4.8-4.49 2.29-.66 4.77-.3 6.64 1.16 1.48 1.18 2.37 2.82 2.37 4.54h-3.69c0-.49-.15-.97-.43-1.37-.28-.4-.68-.7-1.14-.88-.46-.18-.96-.2-1.46-.06-.5.14-.95.43-1.26.83-.3.4-.46.9-.46 1.42 0 .52.16 1.02.46 1.42.31.4.76.69 1.26.83.5.14 1 .12 1.46-.06.46-.18.86-.48 1.14-.88.29-.4.43-.88.43-1.37h3.69v.01z"/><path d="M22.02 12.02a9 9 0 01-1.85 5.56 8.97 8.97 0 01-5.56 1.85 8.98 8.98 0 01-5.56-1.85 8.97 8.97 0 01-1.85-5.56 8.97 8.97 0 011.85-5.56 8.98 8.98 0 015.56-1.85 8.97 8.97 0 015.56 1.85 8.97 8.97 0 011.85 5.56z" fill="#4285F4"/><circle cx="12" cy="12" r="1" fill="#EA4335"/><circle cx="12" cy="12" r="1" fill="#FBBC05"/><circle cx="12" cy="12" r="1" fill="#34A853"/>
</svg>
Continue with Google
</button>
<button class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-500 rounded-xl shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-900 group relative overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-blue-100/30 to-white/30 dark:from-gray-500/30 dark:to-gray-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<svg class="w-5 h-5 mr-3" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0zm3.535 7.424c.007-.058.012-.116.012-.175 0-.114-.009-.228-.027-.341-.019-.114-.047-.225-.084-.336-.037-.11-.082-.218-.137-.324-.055-.106-.12-.21-.194-.31-.1-.137-.215-.262-.345-.38-.073-.066-.15-.128-.231-.188-.082-.06-.168-.116-.258-.168-.09-.052-.18-.098-.276-.142-.096-.044-.196-.084-.3-.122-.104-.038-.21-.072-.32-.102-.11-.03-.22-.054-.333-.075C12.333 4.015 12.167 4 12 4c-.167 0-.333.015-.5.045-.167.03-.328.077-.487.14-.158.062-.314.137-.468.225-.154.088-.302.19-.444.3-.142.11-.277.23-.404.36-.127.13-.245.267-.354.41-.11.14-.21.285-.3.435-.09.15-.17.3-.24.456-.07.156-.128.318-.175.485-.047.167-.08.338-.097.51-.017.172-.025.345-.025.518V9h4.375c.007.575.127 1.137.362 1.687.235.55.57.994 1.006 1.332.437.337.954.544 1.55.625.596.08 1.205.042 1.826-.115s1.207-.406 1.748-.777c.541-.37.97-.837 1.286-1.398ZM12 20.915c-1.378-.002-2.738-.29-4.025-.865-1.287-.575-2.482-1.418-3.535-2.496C3.36 16.486 2.518 15.29 1.94 14.004c-.57-1.287-.85-2.646-.848-4.025h4.375v2.85c0 .038.003.076.009.114.006.038.014.076.024.114.01.038.022.074.037.11.015.036.032.07.052.103.02.034.043.065.068.094.026.029.054.056.09.08.035.025.074.047.116.066.042.02.086.037.133.053.047.016.095.028.145.038l.15.018c.074.008.15.006.225-.005.075-.01.15-.025.22-.045.07-.02.138-.047.2-.08.062-.033.12-.07.17-.11.05-.04.094-.084.13-.13.036-.046.064-.093.085-.14.02-.047.034-.095.04-.145.006-.05.008-.1.008-.15l-.015-3.05h4.375V15h-4.375c-.328-.01-.65-.015-.968-.016-.318-.001-.637.003-.95.012-.313.009-.623.027-.93.053-.306.026-.607.062-.9.109-.292.048-.578.106-.856.175-.278.07-.547.15-.805.245-.257.095-.505.2-.74.31-.236.11-.46.223-.672.34-.212.118-.41.24-.59.366-.18.125-.347.252-.5.378-.153.126-.29.25-.407.37-.118.12-.224.238-.317.355-.094.116-.174.23-.238.34-.065.11-.115.215-.15.318-.035.103-.053.204-.055.305v.23h12.5v-2.85z"/>
</svg>
Continue with Apple
</button>
<button class="w-full flex items-center justify-center px-6 py-3 border border-gray-300 dark:border-gray-500 rounded-xl shadow-sm text-base font-medium text-gray-700 dark:text-gray-200 bg-white dark:bg-gray-700 hover:bg-gray-50 dark:hover:bg-gray-600 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-900 group relative overflow-hidden">
<span class="absolute inset-0 bg-gradient-to-br from-blue-100/30 to-white/30 dark:from-gray-500/30 dark:to-gray-700/30 opacity-0 group-hover:opacity-100 transition-opacity duration-300"></span>
<svg class="w-5 h-5 mr-3" aria-hidden="true" fill="currentColor" viewBox="0 0 24 24">
<path d="M22.02 0H1.98A1.981 1.981 0 000 1.98v20.04c0 1.093.887 1.98 1.98 1.98h20.04c1.093 0 1.98-.887 1.98-1.98V1.98A1.981 1.981 0 0022.02 0zm-3.05 7.82c-.372 0-.677-.31-.677-.69-.001-.38.304-.69.676-.69.373 0 .677.31.677.69s-.304.69-.676.69zm-1.808 1.91h3.048c.082.91-.497 2.103-1.637 2.103-1.077 0-1.572-.75-1.41-1.53-.001-.001-.001-.002-.001-.003zm-3.23 3.99c.045.029.091.05.138.064l-.062-.02c-.062.01-.122.02-.184.02-.123-.002-.24-.03-.35-.07l-.02-.01-.06-.04c-.05-.03-.098-.06-.145-.1l-.06-.03-.04-.02c-.04-.03-.07-.05-.11-.08l-.07-.04c-.04-.02-.08-.05-.11-.07-.04-.02-.07-.04-.1-.06s-.06-.03-.08-.04l-.04-.02a.208.2088 20.8 1.02c.005.002.01.004.015.006.002.001.004.002.006.003l.006.002h.001a.36.36 0 01.02.01c.01.003.02.006.03.009l.067.02c-.01-.004-.02-.007-.03-.01v.001A.256.2560 25.6 0 0113.88 13.7l-.02-.01c-.13-.08-.25-.17-.37-.28-.12-.11-.23-.23-.34-.37-.11-.14-.2-.29-.29-.46-.09-.17-.16-.34-.21-.52-.05-.19-.08-.37-.08-.57s.0-.38.07-.57c.07-.19.16-.36.25-.52s.2-.31.32-.45c.12-.13.26-.25.4-.35.14-.1.29-.18.45-.24s.32-.09.49-.09c.17 0 .34.03.5.08s.32.12.45.2.25.17.34.28c.1.11.18.23.25.37s.11.29.11.45c0 .16-.02.31-.07.45-.05.14-.12.27-.2.38-.08.11-.17.21-.29.3-.12.09-.25.17-.4.24-.15.07-.3.12-.47.16s-.33.05-.5.05c-.17 0-.34-.02-.5-.06-.16-.04-.31-.09-.46-.16v.05c.001.001.001.002.001.003l-.001.001a.49.49 0 01-.04.06c.03-.01.06-.02.09-.03.04-.01.08-.03.11-.05l.02-.01c.03-.02.06-.03.09-.05l.18-.1c.04-.02.08-.04.12-.07.04-.03.07-.05.1-.08l.05-.03c.03-.02.06-.04.08-.06l.006-.005c.002-.001.004-.002.006-.003l.004-.002c.002-.001.003-.001.004-.002h.001c.007-.003.015-.005.02-.006l.003-.001c.002-.001.004-.001.006-.002v.001h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001L10.02 11.23h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001A.256.256 0 016.12 11.23l-.02-.01c-.13-.08-.25-.17-.37-.28-.12-.11-.23-.23-.34-.37-.11-.14-.2-.29-.29-.46C5.01 9.8 4.94 9.62 4.89 9.43c-.05-.19-.08-.37-.08-.57s0-.38.07-.57c.07-.19.16-.36.25-.52s.2-.31.32-.45c.12-.13.26-.25.4-.35.14-.1.29-.18.45-.24s.32-.09.49-.09c.17 0 .34.03.5.08s.32.12.45.2.25.17.34.28c.1.11.18.23.25.37s.11.29.11.45c0 .16-.02.31-.07.45-.05.14-.12.27-.2.38-.08.11-.17.21-.29.3-.12.09-.25.17-.4.24-.15.07-.3.12-.47.16s-.33.05-.5.05c-.17 0-.34-.02-.5-.06-.16-.04-.31-.09-.46-.16v.05a.49.49 0 01-.04.06c.03-.01.06-.02.09-.03.04-.01.08-.03.11-.05l.02-.01c.03-.02.06-.03.09-.05l.18-.1c.04-.02.08-.04.12-.07.04-.03.07-.05.1-.08l.05-.03c.03-.02.06-.04.08-.06l.006-.005c.002-.001.004-.002.006-.003l.004-.002c.002-.001.003-.001.004-.002h.001c.007-.003.015-.005.02-.006l.003-.001c.002-.001.004-.001.006-.002v.001h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001L10.02 11.23h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001A.256.256 0 016.12 11.23l-.02-.01c-.13-.08-.25-.17-.37-.28-.12-.11-.23-.23-.34-.37-.11-.14-.2-.29-.29-.46C5.01 9.8 4.94 9.62 4.89 9.43c-.05-.19-.08-.37-.08-.57s0-.38.07-.57c.07-.19.16-.36.25-.52s.2-.31.32-.45c.12-.13.26-.25.4-.35.14-.1.29-.18.45-.24s.32-.09.49-.09c.17 0 .34.03.5.08s.32.12.45.2.25.17.34.28c.1.11.18.23.25.37s.11.29.11.45c0 .16-.02.31-.07.45-.05.14-.12.27-.2.38-.08.11-.17.21-.29.3-.12.09-.25.17-.4.24-.15.07-.3.12-.47.16s-.33.05-.5.05c-.17 0-.34-.02-.5-.06-.16-.04-.31-.09-.46-.16v.05a.49.49 0 01-.04.06c.03-.01.06-.02.09-.03.04-.01.08-.03.11-.05l.02-.01c.03-.02.06-.03.09-.05l.18-.1c.04-.02.08-.04.12-.07.04-.03.07-.05.1-.08l.05-.03c.03-.02.06-.04.08-.06l.006-.005c.002-.001.004-.002.006-.003l.004-.002c.002-.001.003-.001.004-.002h.001c.007-.003.015-.005.02-.006l.003-.001c.002-.001.004-.001.006-.002v.001h-.001a.208.208 0 01-.02-.01c-.01-.003-.02-.006-.03-.009l-.067-.02c.01.004.02.007.03.01v-.001L10.02 11.23h-.001z"/>
</svg>
Continue with Facebook
</button>
</div>
<div class="relative flex py-5 items-center">
<div class="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
<span class="flex-shrink mx-4 text-gray-500 dark:text-gray-400 text-sm">Or</span>
<div class="flex-grow border-t border-gray-300 dark:border-gray-600"></div>
</div>
<form class="space-y-4">
<div>
<label for="email" class="sr-only">Email address</label>
<input id="email" name="email" type="email" autocomplete="email" required class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-xl shadow-sm placeholder-gray-400 focus:outline-none focus:ring-2 focus:ring-blue-400 focus:border-transparent text-gray-900 dark:text-white bg-white dark:bg-gray-800 transition-colors duration-200 text-sm" placeholder="Email address">
</div>
<button type="submit" class="w-full flex justify-center px-6 py-3 border border-transparent rounded-xl shadow-sm text-base font-medium text-white bg-blue-500 hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700 transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 dark:focus:ring-offset-gray-900 ">
Continue with Email
</button>
</form>
<p class="mt-8 text-center text-sm text-gray-500 dark:text-gray-400">
By continuing, you agree to our <a href="#" class="font-medium text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 transition-colors duration-200">Terms of Service</a> and <a href="#" class="font-medium text-blue-500 hover:text-blue-600 dark:text-blue-400 dark:hover:text-blue-500 transition-colors duration-200">Privacy Policy</a>.
</p>
</div>
</div>Componenti correlati
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.
Componente Pulsanti OAuth
Un componente pulsanti OAuth reattivo con design a scheumorfismo, combinazione di colori analoga e interazioni complesse, adatto per le interfacce dei social media. Include il supporto per il tema scuro e utilizza Tailwind CSS per lo stile, senza JavaScript. Immagini tratte da Lorem Picsum e RandomUser.me.
Componente Pulsanti OAuth
Un componente reattivo per pulsanti OAuth a tema scuro con combinazione di colori triadici ed elementi interattivi complessi per siti Web aziendali/aziendali.