Cách tạo form đăng nhập mạng xã hội (social login) với CSS

Giới thiệu

Social login form cho phép người dùng đăng nhập bằng tài khoản Google, Facebook, Apple, GitHub... Giúp giảm ma sát đăng ký, tăng conversion. CSS tập trung vào layout nút social, icon brand, và phân cách với form truyền thống.

Ví dụ hoàn chỉnh - Social Login Form

<!DOCTYPE html>
<html lang="vi">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Social Login Form</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * { box-sizing: border-box; }
    body { font-family: 'Segoe UI', system-ui, sans-serif; background: #f0f2f5; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 20px; }
    .login-card {
      width: 100%;
      max-width: 440px;
      background: #fff;
      border-radius: 16px;
      box-shadow: 0 8px 30px rgba(0,0,0,0.08);
      padding: 40px;
    }
    .logo { text-align: center; margin-bottom: 24px; }
    .logo svg { width: 48px; height: 48px; color: #1eadef; }
    h1 { text-align: center; margin: 0 0 8px; font-size: 26px; color: #1a1a1a; }
    .subtitle { text-align: center; margin: 0 0 28px; color: #666; font-size: 14px; }
    .form-group { margin-bottom: 18px; }
    label { display: block; margin-bottom: 6px; font-size: 13px; font-weight: 500; color: #333; }
    input[type="email"], input[type="password"] {
      width: 100%;
      padding: 14px 16px;
      font-size: 15px;
      border: 1.5px solid #e0e0e0;
      border-radius: 10px;
      background: #fff;
      transition: all 0.2s;
    }
    input:focus { outline: none; border-color: #1eadef; box-shadow: 0 0 0 3px rgba(30,173,239,0.15); }
    .form-options { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 20px; font-size: 13px; }
    .checkbox-wrap { display: flex; align-items: center; gap: 6px; cursor: pointer; }
    .checkbox-wrap input { width: 16px; height: 16px; accent-color: #1eadef; }
    .forgot-link { color: #1eadef; text-decoration: none; font-weight: 500; }
    .forgot-link:hover { text-decoration: underline; }
    .btn-primary {
      width: 100%;
      padding: 14px;
      font-size: 15px;
      font-weight: 600;
      color: #fff;
      background: #1eadef;
      border: none;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.2s, transform 0.1s;
    }
    .btn-primary:hover { background: #1598d3; }
    .btn-primary:active { transform: scale(0.98); }
    /* Divider "HOẶC" */
    .divider { display: flex; align-items: center; gap: 16px; margin: 24px 0; color: #999; font-size: 13px; }
    .divider::before, .divider::after { content: ''; flex: 1; height: 1px; background: #e0e0e0; }
    /* Social Buttons */
    .social-btns { display: flex; flex-direction: column; gap: 12px; }
    .social-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      width: 100%;
      padding: 12px 16px;
      font-size: 14px;
      font-weight: 600;
      border: 1.5px solid #e0e0e0;
      border-radius: 10px;
      background: #fff;
      cursor: pointer;
      transition: all 0.2s;
    }
    .social-btn:hover { background: #f8f9fa; border-color: #d0d0d0; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }
    .social-btn:focus-visible { outline: 3px solid rgba(30,173,239,0.3); outline-offset: 2px; }
    .social-btn i { font-size: 18px; width: 20px; text-align: center; }
    .social-btn.google { color: #333; }
    .social-btn.google i { background: linear-gradient(45deg, #ea4335, #fbbc05, #34a853, #4285f4); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
    .social-btn.facebook { color: #1877f2; }
    .social-btn.facebook i { color: #1877f2; }
    .social-btn.apple { color: #000; }
    .social-btn.github { color: #24292e; }
    .social-btn.github i { color: #24292e; }
    @media (max-width: 480px) { .login-card { padding: 28px 20px; } }
  </style>
</head>
<body>
  <div class="login-card">
    <div class="logo"><svg viewBox="0 0 24 24" fill="currentColor"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v11h12v-11l-2.09-2.09c-.27.58-.55 1.17-.87 1.76z"/></svg></div>
    <h1>Chào mừng trở lại</h1>
    <p class="subtitle">Đăng nhập để tiếp tục trải nghiệm</p>
    <form>
      <div class="form-group">
        <label for="email">Email</label>
        <input type="email" id="email" name="email" placeholder="you@example.com" required autocomplete="email">
      </div>
      <div class="form-group">
        <label for="password">Mật khẩu</label>
        <input type="password" id="password" name="password" placeholder="••••••••" required autocomplete="current-password">
      </div>
      <div class="form-options">
        <label class="checkbox-wrap"><input type="checkbox" name="remember"> Nhớ tôi</label>
        <a href="#" class="forgot-link">Quên mật khẩu?</a>
      </div>
      <button type="submit" class="btn-primary">Đăng nhập</button>
    </form>
    <div class="divider">HOẶC</div>
    <div class="social-btns">
      <button type="button" class="social-btn google"><i class="fab fa-google"></i> Tiếp tục với Google</button>
      <button type="button" class="social-btn facebook"><i class="fab fa-facebook-f"></i> Tiếp tục với Facebook</button>
      <button type="button" class="social-btn apple"><i class="fab fa-apple"></i> Tiếp tục với Apple</button>
      <button type="button" class="social-btn github"><i class="fab fa-github"></i> Tiếp tục với GitHub</button>
    </div>
  </div>
</body>
</html>

Thiết kế nút Social Button

Yêu cầu của các nhà cung cấp (Brand Guidelines)

• Google: Nút phải dùng gradient icon, text "Sign in with Google", không được đổi màu nền.
• Apple: Bắt buộc dùng "Sign in with Apple" button chính thức (JS), màu đen/nền trắng, corner radius 4px.
• Facebook: Text "Continue with Facebook", màu xanh #1877f2.

Accessibility

• Mỗi nút social có text rõ ràng (không chỉ icon).
• type="button" để không submit form chính.
• Focus ring rõ ràng cho điều hướng bàn phím.