Login UI with Social Buttons

A login UI with social buttons built with pure HTML and CSS that combines traditional credential fields with third party sign-in options. It enhances authentication flexibility and user convenience within a responsive layout.

Usage

Use this component when interfaces require multiple login methods, such as SaaS platforms, membership sites, web applications, or onboarding flows offering alternative authentication options.

Implementation

The layout uses a stacked form structure with grouped social action buttons, styled using CSS for spacing, alignment, and hover states. Responsive rules ensure proper stacking across screen sizes.

HTML

<form class="login social">
  <button type="button" class="google">
    <img src="https://www.svgrepo.com/show/475656/google-color.svg" alt="">
    Continue with Google
  </button>

  <button type="button" class="github">
    <img src="https://www.svgrepo.com/show/512317/github-142.svg" alt="">
    Continue with GitHub
  </button>
</form>

<form class="login social">
  <button type="button" class="google">
    <img src="https://www.svgrepo.com/show/475656/google-color.svg" alt="">
    Continue with Google
  </button>

  <button type="button" class="github">
    <img src="https://www.svgrepo.com/show/512317/github-142.svg" alt="">
    Continue with GitHub
  </button>
</form>

CSS

.login.social{
  max-width:280px;
  margin:auto;
}

.login.social button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:10px 14px;
  margin:8px 0;
  border-radius:10px;
  border:1px solid transparent;

  font-size:13px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}

.login.social img{
  width:18px;
  height:18px;
}

.login.social .google{
  background:#ffffff;
  color:#0f172a;
  border-color:#e5e7eb;
}

.login.social .google{
  background:#ffffff;
  color:#0f172a;
  border-color:#e5e7eb;
}

.login.social button:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}

@media (prefers-color-scheme: dark){
  .login.social .google{
    background:#020617;
    color:#e5e7eb;
    border-color:#1f2937;
  }
}

.login.social{
  max-width:280px;
  margin:auto;
}

.login.social button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  padding:10px 14px;
  margin:8px 0;
  border-radius:10px;
  border:1px solid transparent;

  font-size:13px;
  cursor:pointer;
  transition:transform .15s ease, box-shadow .15s ease;
}

.login.social img{
  width:18px;
  height:18px;
}

.login.social .google{
  background:#ffffff;
  color:#0f172a;
  border-color:#e5e7eb;
}

.login.social .google{
  background:#ffffff;
  color:#0f172a;
  border-color:#e5e7eb;
}

.login.social button:hover{
  transform:translateY(-1px);
  box-shadow:0 6px 14px rgba(0,0,0,.12);
}

@media (prefers-color-scheme: dark){
  .login.social .google{
    background:#020617;
    color:#e5e7eb;
    border-color:#1f2937;
  }
}

Notes

• Built with pure HTML and CSS
• No JavaScript required
• Combines standard and social login options
• Enhances authentication method visibility
• Fully responsive across breakpoints
• Suitable for SaaS and web applications
• Easy to customize button styling and spacing

Preview styles shown. Production customization recommended.

Browse More UI Components

Explore hundreds of reusable HTML & CSS UI components built for modern web projects.
Discover buttons, cards, loaders, animations, layouts, and more all with live previews and clean, copy-paste code.