OAuth-Schaltflächen-Komponente
Eine reaktionsschnelle OAuth-Schaltflächenkomponente mit Skeuomorphismus-Design, analogem Farbschema und komplexen Interaktionen, die für Social-Media-Schnittstellen geeignet ist. Enthält Unterstützung für dunkle Themen und verwendet Tailwind CSS für das Styling, ohne JavaScript. Bilder von Lorem Picsum und RandomUser.me.
HTML-Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OAuth Buttons</title>
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
}
</script>
<style>
.skeu-button {
background: linear-gradient(145deg, #e0e0e0, #ffffff);
box-shadow: 6px 6px 12px #bebebe, -6px -6px 12px #ffffff;
transition: all 0.3s ease;
}
.skeu-button:hover {
background: linear-gradient(145deg, #ffffff, #e0e0e0);
box-shadow: 3px 3px 6px #bebebe, -3px -3px 6px #ffffff;
}
.skeu-button:active {
background: linear-gradient(145deg, #d0d0d0, #f0f0f0);
box-shadow: inset 2px 2px 5px #bebebe, inset -2px -2px 5px #ffffff;
}
.dark .skeu-button {
background: linear-gradient(145deg, #3a3a3a, #2a2a2a);
box-shadow: 6px 6px 12px #202020, -6px -6px 12px #505050;
}
.dark .skeu-button:hover {
background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
box-shadow: 3px 3px 6px #202020, -3px -3px 6px #505050;
}
.dark .skeu-button:active {
background: linear-gradient(145deg, #2a2a2a, #3a3a3a);
box-shadow: inset 2px 2px 5px #151515, inset -2px -2px 5px #404040;
}
.analogous-blue {
background-color: #64B5F6; /* Light Blue */
}
.analogous-blue:hover {
background-color: #42A5F5; /* Blue */
}
.analogous-green {
background-color: #81C784; /* Light Green */
}
.analogous-green:hover {
background-color: #66BB6A; /* Green */
}
.analogous-cyan {
background-color: #4DD0E1; /* Light Cyan */
}
.analogous-cyan:hover {
background-color: #26C6DA; /* Cyan */
}
.dark .analogous-blue {
background-color: #1976D2;
}
.dark .analogous-blue:hover {
background-color: #1565C0;
}
.dark .analogous-green {
background-color: #388E3C;
}
.dark .analogous-green:hover {
background-color: #2E7D32;
}
.dark .analogous-cyan {
background-color: #00838F;
}
.dark .analogous-cyan:hover {
background-color: #006064;
}
</style>
</head>
<body class="bg-gray-100 dark:bg-gray-900 flex items-center justify-center min-h-screen p-4">
<div class="w-full max-w-md bg-white dark:bg-gray-800 rounded-xl p-8 space-y-6 skeu-button relative z-10">
<!-- Toggle for Dark Mode -->
<button id="themeToggle" class="absolute top-4 right-4 p-2 rounded-full bg-gray-200 dark:bg-gray-700 skeu-button">
<svg class="w-6 h-6 text-gray-800 dark:text-gray-200" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 3v1m0 16v1m9-9h1M3 12H2M15.325 5.675l.707-.707M5.677 15.327l-.707.707M18.364 18.364l.707.707M5.636 5.636l-.707-.707M12 18a6 6 0 110-12 6 6 0 010 12z"></path>
</svg>
</button>
<h2 class="text-3xl font-extrabold text-center text-gray-800 dark:text-gray-100 mb-8">
Join the Community
</h2>
<div class="space-y-4">
<!-- Google Button -->
<a href="#" class="flex items-center justify-center w-full px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-gray-700 dark:text-gray-200 bg-gray-50 dark:bg-gray-700 skeu-button analogous-blue">
<img class="h-6 w-6 mr-3" src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c1/Google_%22G%22_logo.svg/1024px-Google_%22G%22_logo.svg.png" alt="Google Logo">
Sign in with Google
</a>
<!-- Facebook Button -->
<a href="#" class="flex items-center justify-center w-full px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-white analogous-green skeu-button">
<img class="h-6 w-6 mr-3" src="https://upload.wikimedia.org/wikipedia/commons/5/51/Facebook_f_logo_%282019%29.svg" alt="Facebook Logo">
Sign in with Facebook
</a>
<!-- Twitter Button -->
<a href="#" class="flex items-center justify-center w-full px-6 py-3 border border-gray-300 dark:border-gray-600 rounded-lg shadow-sm text-lg font-medium text-white analogous-cyan skeu-button">
<img class="h-6 w-6 mr-3" src="https://upload.wikimedia.org/wikipedia/commons/4/4f/Twitter-logo.png" alt="Twitter Logo">
Sign in with Twitter
</a>
</div>
<div class="relative py-4">
<div class="absolute inset-0 flex items-center">
<div class="w-full border-t border-gray-300 dark:border-gray-600"></div>
</div>
<div class="relative flex justify-center text-sm">
<span class="px-3 bg-white dark:bg-gray-800 text-gray-500 dark:text-gray-400">
Or continue with
</span>
</div>
</div>
<!-- Email/Password Form (Skeuomorphic) -->
<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-lg text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 skeu-button"
placeholder="Email address">
</div>
<div>
<label for="password" class="sr-only">Password</label>
<input id="password" name="password" type="password" autocomplete="current-password" required
class="w-full px-4 py-3 border border-gray-300 dark:border-gray-600 rounded-lg text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 focus:outline-none focus:ring-2 focus:ring-blue-500 dark:focus:ring-blue-400 skeu-button"
placeholder="Password">
</div>
<button type="submit"
class="w-full flex justify-center py-3 px-4 border border-transparent rounded-lg shadow-sm text-lg font-medium text-white analogous-blue skeu-button relative overflow-hidden group">
Sign In
<span class="absolute inset-0 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300">
<svg class="h-6 w-6" fill="currentColor" viewBox="0 0 20 20">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-8.707l-3-3a1 1 0 00-1.414 1.414L10.586 9H7a1 1 0 100 2h3.586l-1.293 1.293a1 1 0 101.414 1.414l3-3a1 1 0 000-1.414z" clip-rule="evenodd"></path>
</svg>
</span>
</button>
</form>
<div class="text-center text-sm text-gray-600 dark:text-gray-300">
Not a member?
<a href="#" class="font-medium text-blue-600 dark:text-blue-400 hover:text-blue-500 dark:hover:text-blue-300">Sign Up</a>
</div>
<!-- Social Proof/Avatars -->
<div class="text-center mt-8">
<p class="text-gray-700 dark:text-gray-200 mb-4 ">Join 1000+ happy users!</p>
<div class="flex justify-center -space-x-2 overflow-hidden">
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800 skeu-button"
src="https://randomuser.me/api/portraits/women/1.jpg" alt="Avatar 1">
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800 skeu-button"
src="https://randomuser.me/api/portraits/men/2.jpg" alt="Avatar 2">
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800 skeu-button"
src="https://randomuser.me/api/portraits/women/3.jpg" alt="Avatar 3">
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800 skeu-button"
src="https://randomuser.me/api/portraits/men/4.jpg" alt="Avatar 4">
<img class="inline-block h-10 w-10 rounded-full ring-2 ring-white dark:ring-gray-800 skeu-button"
src="https://randomuser.me/api/portraits/women/5.jpg" alt="Avatar 5">
</div>
</div>
<!-- Background Image / Texture (Skeuomorphic) -->
<div class="absolute inset-0 bg-gradient-to-br from-blue-100 to-green-100 dark:from-gray-700 dark:to-gray-900 opacity-20 rounded-xl -z-10 blur-xl"></div>
</div>
<script>
document.getElementById('themeToggle').addEventListener('click', function() {
document.documentElement.classList.toggle('dark');
});
</script>
</body>
</html>Verwandte Komponenten
OAuth-Schaltflächen-Komponente
Einfache, reaktionsschnelle OAuth-Schaltflächenkomponente mit Aquarell-/Kunststil, coolem neutralem Farbschema, geeignet für E-Commerce-Anwendungen. Enthält Unterstützung für den Dunkelmodus.
OAuth-Schaltflächen-Komponente
Eine OAuth Buttons-Komponente im Neumorphism-Stil, die für einen Blog oder eine Plattform zum Konsum von Inhalten entwickelt wurde. Die Komponente verfügt über Schaltflächen für verschiedene OAuth-Anbieter mit responsivem Design, Unterstützung für dunkle Themen und einem monochromatischen Farbschema.
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.