Composant Boutons OAuth
Un composant de boutons OAuth réactif avec un design Skeuomorphism, une palette de couleurs analogue et des interactions complexes, adapté aux interfaces de médias sociaux. Inclut la prise en charge du thème sombre et utilise Tailwind CSS pour le style, sans JavaScript. Images tirées de Lorem Picsum et 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>Composants associés
Composant Boutons OAuth
Composant de boutons OAuth réactifs pour l’interface utilisateur de commerce électronique en mode sombre avec palette de couleurs pastel.
Composant Boutons OAuth
Un composant de boutons OAuth réactif sur le thème sombre avec une palette de couleurs triadique et des éléments interactifs complexes pour les sites Web d’entreprise.
Composant Boutons OAuth
Un ensemble de boutons OAuth conçus avec une esthétique brutaliste et Tailwind CSS, avec des effets réactifs et une prise en charge du thème sombre.