OAuth Buttons Component
A responsive OAuth Buttons Component with Skeuomorphism design, analogous color scheme, and complex interactions, suitable for social media interfaces. Includes dark theme support and uses Tailwind CSS for styling, without JavaScript. Images sourced from Lorem Picsum and 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>Related Components
OAuth Buttons Component
A responsive dark-themed OAuth buttons component with triadic color scheme and complex interactive elements for business/corporate websites.
OAuth Buttons Component
A set of OAuth buttons designed with a brutalist aesthetic and Tailwind CSS, featuring responsive effects and dark theme support.
OAuth Buttons Component
Glassmorphism OAuth Buttons Component with responsive effects and dark theme support.