Компоненты Кнопки OAuth Компонент кнопок OAuth

Компонент кнопок OAuth

Отзывчивый компонент OAuth Buttons со скевоморфизмом, аналогичной цветовой схемой и сложными взаимодействиями, подходящий для интерфейсов социальных сетей. Включает поддержку темных тем и использует Tailwind CSS для стилизации, без JavaScript. Изображения предоставлены Lorem Picsum и RandomUser.me.

Предварительный просмотр

HTML-код

<!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>

Связанные компоненты

Кнопки OAuth, компонент 1

Компонент, который отображает кнопки OAuth с привлекательной анимацией и поддержкой темного режима, используя Tailwind CSS для дизайна. Кнопки реагируют на действия пользователя с помощью тонких микровзаимодействий, а изображения добавляются из случайных источников-заполнителей.

Открытый