24 CSS Login Form Designs with Live Demos

Social First

Social-first sign in form with OAuth buttons (Google, GitHub) up top, a divider, and a compact email fallback — the standard product onboarding pattern.

Pure CSS MIT licensed

Social First the 10th of 24 designs in the 24 CSS Login Form Designs with Live Demos collection. The design is implemented in pure CSS — no JavaScript required. Copy the HTML and CSS panels below into your project. Because the demo is pure CSS, it works in any framework or templating engine you happen to use. The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.

Live preview

Open in playground

The code

<form class="lf-soc">
  <div class="lf-soc-title">Sign in</div>
  <button type="button" class="lf-soc-btn google">
    <span class="lf-soc-ic">G</span> Continue with Google
  </button>
  <button type="button" class="lf-soc-btn github">
    <span class="lf-soc-ic">●</span> Continue with GitHub
  </button>
  <div class="lf-soc-or"><span>or</span></div>
  <input type="email" placeholder="Email address" required />
  <button type="submit" class="lf-soc-submit">Continue with email</button>
  <div class="lf-soc-foot">By continuing you agree to our <a href="#">Terms</a></div>
</form>

.lf-soc {
  width: 100%;
  max-width: 290px;
  background: #15151d;
  border: 1px solid rgba(255, 255, 255, 0.07);
  border-radius: 14px;
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.lf-soc-title {
  font-size: 16px;
  font-weight: 700;
  color: #f0eeff;
  text-align: center;
  margin-bottom: 4px;
}
.lf-soc-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-content: center;
  padding: 9px 14px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  color: #f0eeff;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.15s;
}
.lf-soc-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}
.lf-soc-ic {
  width: 18px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 800;
  font-size: 11px;
  background: white;
  color: #15151d;
}
.lf-soc-btn.github .lf-soc-ic {
  background: #f0eeff;
  color: #15151d;
}
.lf-soc-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 6px 0;
  font-size: 11px;
  color: #b8b6d4;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}
.lf-soc-or::before,
.lf-soc-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.08);
}
.lf-soc input {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 8px;
  padding: 10px 12px;
  color: #f0eeff;
  font-size: 13px;
  outline: none;
}
.lf-soc input:focus {
  border-color: #7c6cff;
}
.lf-soc-submit {
  padding: 10px;
  background: linear-gradient(135deg, #7c6cff, #ff6c8a);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.lf-soc-foot {
  font-size: 10px;
  color: #b8b6d4;
  text-align: center;
  margin-top: 4px;
}
.lf-soc-foot a {
  color: #a78bfa;
  text-decoration: none;
}

More from 24 CSS Login Form Designs with Live Demos

Pin Pad Inline Validation Constellation Biometric Prompt Show Password Toggle OTP Verify Aurora Glow Neon Synthwave Liquid Slide Card Flip Reset Magic Link Terminal Prompt

View the full collection →