Social Login Buttons

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Login Buttons</title>
    <style>
        /*
         Component: Social Login Buttons
         Description: A set of buttons for third-party authentication.
        */

.social-login-container-1 {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
            display: flex;
            flex-direction: column;
            gap: 1rem;
            max-width: 320px;
            margin: 2rem auto;
            padding: 2rem;
            background-color: #ffffff;
            border-radius: 8px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
        }

.social-login-btn-1 {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.75rem;
            width: 100%;
            padding: 0.75rem 1rem;
            font-size: 1rem;
            font-weight: 500;
            border: 1px solid transparent;
            border-radius: 6px;
            cursor: pointer;
            transition: background-color 0.2s ease, border-color 0.2s ease;
        }

.social-login-btn-1 svg {
            width: 18px;
            height: 18px;
        }
        
        .social-login-btn-1:focus-visible {
            outline: 3px solid #007bff;
            outline-offset: 2px;
        }

/* --- Google Button --- */
        .social-login-btn-1.google {
            background-color: #ffffff;
            color: #4A4A4A;
            border-color: #E0E0E0;
        }
        .social-login-btn-1.google:hover {
            background-color: #f7f7f7;
        }

/* --- Apple Button --- */
        .social-login-btn-1.apple {
            background-color: #000000;
            color: #ffffff;
        }
        .social-login-btn-1.apple:hover {
            background-color: #333333;
        }

/* --- Facebook Button --- */
        .social-login-btn-1.facebook {
            background-color: #1877F2;
            color: #ffffff;
        }
        .social-login-btn-1.facebook:hover {
            background-color: #166FE5;
        }
        .social-login-btn-1.facebook svg {
            fill: currentColor;
        }

</style>
</head>
<body>

<div class="social-login-container-1">
        <button type="button" class="social-login-btn-1 google">
            
            <svg aria-hidden="true" height="24" width="24" viewBox="0 0 24 24"><path d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z" fill="#4285F4"/><path d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z" fill="#34A853"/><path d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.07H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.93l3.66-2.84z" fill="#FBBC05"/><path d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.07l3.66 2.84c.87-2.6 3.3-4.53 6.16-4.53z" fill="#EA4335"/><path d="M1 1h22v22H1z" fill="none"/></svg>
            <span>Sign in with Google</span>
        </button>
        <button type="button" class="social-login-btn-1 apple">
            
            <svg aria-hidden="true" height="24" width="24" viewBox="0 0 24 24"><path d="M20.72,13.59c-0.21-2.22,1.38-4,1.44-4.06c-1.3-1.84-3.32-2-3.93-2.06c-1.63-0.18-3.26,0.96-4.12,0.96 c-0.85,0-2.09-0.87-3.46-0.84c-1.94,0.06-3.66,1.06-4.6,2.69c-1.85,3.22-0.58,7.99,1.26,10.63c0.91,1.32,2.02,2.78,3.43,2.72 c1.36-0.06,1.86-0.87,3.56-0.87c1.69,0,2.1,0.87,3.58,0.81c1.55-0.06,2.44-1.29,3.31-2.63c0.95-1.47,1.42-2.92,1.48-2.98 c-0.06,0-2.86-1.12-2.88-4.32C20.67,13.62,20.7,13.59,20.72,13.59z M16.63,6.34c0.69-0.86,1.15-1.9,1.06-3.01 c-1.06,0.06-2.19,0.67-2.9,1.52C14.12,5.55,13.62,6.6,13.71,7.67C14.79,7.74,15.93,7.2,16.63,6.34z" fill="currentColor"/></svg>
            <span>Continue with Apple</span>
        </button>
        <button type="button" class="social-login-btn-1 facebook">
            
            <svg aria-hidden="true" height="24" width="24" viewBox="0 0 24 24"><path d="M9 8h-3v4h3v12h5V12h3.642L18 8h-4V6.333c0-.953.375-1.333 1.118-1.333h2.882V1H16c-3.86 0-5 2.222-5 5v2z"/></svg>
            <span>Continue with Facebook</span>
        </button>
    </div>

</body>
</html>