OAuth-Schaltflächen-Komponente
Einfache, reaktionsschnelle OAuth-Login-Buttons-Komponente mit skeuomorphem Design, analogem Farbschema und Unterstützung für den Dunkelmodus, geeignet für Foren-/Community-Plattformen.
HTML-Code
<div class="flex flex-col items-center justify-center p-4 sm:p-6 md:p-8 bg-gradient-to-br from-indigo-50 to-purple-50 dark:from-gray-900 dark:to-gray-800 min-h-screen">
<div class="w-full max-w-sm p-6 sm:p-8 md:p-10 bg-gradient-to-br from-blue-100 via-purple-100 to-pink-100 dark:from-gray-700 dark:via-gray-800 dark:to-gray-700 rounded-xl shadow-2xl transition-all duration-300 ease-in-out
border border-blue-200 dark:border-gray-600
hover:shadow-3xl hover:border-blue-300 dark:hover:border-gray-500
">
<h2 class="text-center text-2xl sm:text-3xl font-extrabold mb-8 text-indigo-800 dark:text-indigo-200
text-shadow-light dark:text-shadow-dark
">Join the Community</h2>
<div class="space-y-6">
<button class="w-full flex items-center justify-center px-6 py-3 sm:py-3.5 border border-transparent text-lg font-medium rounded-xl shadow-md
bg-gradient-to-br from-blue-500 to-blue-600 text-white
hover:from-blue-600 hover:to-blue-700
focus:outline-none focus:ring-4 focus:ring-blue-300 dark:focus:ring-blue-800
active:from-blue-700 active:to-blue-800 active:shadow-inner
transform transition-all duration-200
relative group overflow-hidden
">
<svg class="w-6 h-6 sm:w-7 sm:h-7 mr-3 shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12.0003 12.72L19.2003 8.35999L12.0003 4L4.8003 8.35999L12.0003 12.72ZM12.0003 14.28L4.8003 9.91999L12.0003 18.5999L19.2003 9.91999L12.0003 14.28Z" fill="#FFFFFF"></path>
<path d="M12.0003 4L19.2003 8.36V16.64L12.0003 21L4.8003 16.64V8.36L12.0003 4Z" stroke="#FFFFFF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"></path>
</svg>
<span class="z-10">Continue with Google</span>
<div class="absolute inset-0 bg-blue-700 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
</button>
<button class="w-full flex items-center justify-center px-6 py-3 sm:py-3.5 border border-transparent text-lg font-medium rounded-xl shadow-md
bg-gradient-to-br from-purple-500 to-purple-600 text-white
hover:from-purple-600 hover:to-purple-700
focus:outline-none focus:ring-4 focus:ring-purple-300 dark:focus:ring-purple-800
active:from-purple-700 active:to-purple-800 active:shadow-inner
transform transition-all duration-200
relative group overflow-hidden
">
<svg class="w-6 h-6 sm:w-7 sm:h-7 mr-3 shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.082-.74.082-.725.082-.725 1.204.086 1.838 1.238 1.838 1.238 1.07 1.835 2.809 1.305 3.492.997.107-.775.418-1.305.762-1.604-2.665-.3-5.466-1.332-5.466-5.93 0-1.312.465-2.387 1.229-3.22-.124-.3-.535-1.524.118-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.046.138 3.003.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.876.118 3.176.766.833 1.229 1.908 1.229 3.22 0 4.604-2.801 5.621-5.476 5.922.429.369.816 1.096.816 2.209v3.291c0 .319.192.694.8 0 4.767-1.589 8.197-6.095 8.197-11.389 0-6.627-5.373-12-12-12z"/>
</svg>
<span class="z-10">Continue with GitHub</span>
<div class="absolute inset-0 bg-purple-700 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
</button>
<button class="w-full flex items-center justify-center px-6 py-3 sm:py-3.5 border border-transparent text-lg font-medium rounded-xl shadow-md
bg-gradient-to-br from-pink-500 to-pink-600 text-white
hover:from-pink-600 hover:to-pink-700
focus:outline-none focus:ring-4 focus:ring-pink-300 dark:focus:ring-pink-800
active:from-pink-700 active:to-pink-800 active:shadow-inner
transform transition-all duration-200
relative group overflow-hidden
">
<svg class="w-6 h-6 sm:w-7 sm:h-7 mr-3 shrink-0" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<path d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.419 2.866 8.141 6.843 9.471-.035-.308-.06-.803.01-1.127.069-.323.235-.956.408-1.52.173-.564.331-.79.524-1.042.193-.252.417-.674.673-1.018.257-.344.537-.775.762-1.078.225-.303.473-.618.73-1.01.258-.392.518-.755.768-.973.25-.218.472-.408.68-.564.208-.156.408-.288.608-.408.2-.12.388-.22.564-.296.176-.076.331-.132.463-.168.132-.036.24-.052.324-.048.084.004.148.012.192.024.044.012.064.024.06.032.004.008-.008.012-.008.016v-1.92h-.008c-.004 0-.008.004-.008.012-.004 0-.008.004-.008.008-.004.004-.004.004-.004.004-.004 0-.004 0-.004-.004-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.008-.004-.008-.004-.008-.004-.012-.008-.016-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.008-.004-.012-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008h-.008c-.004 0-.008-.004-.008-.008s-.004-.012-.004-.02c-.004-.008-.004-.016-.004-.02-.004-.004-.004-.008-.004-.012-.004-.008-.004-.016-.004-.024-.004-.008-.004-.016-.004-.024 0-.008-.004-.012-.004-.016-.004-.008-.004-.012-.004-.016-.004-.008.004-.012.004-.016.004-.004.004-.008.004-.012.004-.004.004-.008.004-.012.004-.004.004-.008.004-.012.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008.004-.004.004-.004.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.004-.004-.004-.004-.004-.008-.035-.308-.06-.803.01-1.127.069-.323.235-.956.408-1.52.173-.564.331-.79.524-1.042.193-.252.417-.674.673-1.018.257-.344.537-.775.762-1.078.225-.303.473-.618.73-1.01.258-.392.518-.755.768-.973.25-.218.472-.408.68-.564.208-.156.408-.288.608-.408.2-.12.388-.22.564-.296.176-.076.331-.132.463-.168.132-.036.24-.052.324-.048.084.004.148.012.192.024A10 10 0 0112 2C6.477 2 2 6.477 2 12c0 4.419 2.866 8.141 6.843 9.471z" />
</svg>
<span class="z-10">Continue with Apple</span>
<div class="absolute inset-0 bg-pink-700 opacity-0 group-hover:opacity-20 transition-opacity duration-200"></div>
</button>
</div>
<div class="mt-8 text-center text-sm text-gray-600 dark:text-gray-400">
Or <a href="#" class="font-medium text-indigo-700 hover:text-indigo-900 dark:text-indigo-300 dark:hover:text-indigo-100">sign in with email</a>
</div>
</div>
</div>
<style>
/* Custom utility classes for skeuomorphism */
.text-shadow-light {
text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.6), -1px -1px 2px rgba(0, 0, 0, 0.2);
}
.dark .text-shadow-dark {
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6), -1px -1px 2px rgba(255, 255, 255, 0.2);
}
</style>Verwandte Komponenten
RetroOAuthButtons
Eine einfache OAuth-Schaltflächenkomponente im Retro-Stil mit einem triadischen Farbschema, ideal für eine Portfolio-Site. Verfügt über ein ansprechendes Design und Unterstützung für den Dunkelmodus, das an die Ästhetik der 80er/90er Jahre erinnert.
OAuth-Schaltflächen-Komponente
Eine einfache, saubere und minimalistische Komponente für die Anzeige von OAuth-Login-Buttons, die den Designprinzipien der schweizerischen/internationalen Typografie entspricht. Mit Schwarz-Weiß-Monochrom mit heller Akzentfarbe, voller Reaktionsfähigkeit und Unterstützung des Dunkelmodus, ideal für Dokumentations- oder Wiki-Sites.
OAuth-Schaltflächen-Komponente 1
Eine Komponente, die OAuth-Schaltflächen mit ansprechenden Animationen und Unterstützung für den Dunkelmodus anzeigt und Tailwind CSS für das Design verwendet. Die Schaltflächen reagieren auf Benutzeraktionen mit subtilen Mikrointeraktionen, und Bilder werden aus zufälligen Platzhalterquellen eingefügt.