Modern Login & Signup Form with Social Media Buttons
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login & Signup Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
<template id="v9hg0daxJUsRxuvH8QQP"></template>
<template id="Nl4bNEA7GiztlT2ICqzN"></template>
</head>
<body>
<div class="container">
<div class="row px-3">
<div class="col-lg-10 col-xl-9 card flex-row mx-auto px-0">
<div class="img-left d-none d-md-flex"></div>
<div class="card-body">
<ul class="nav nav-tabs nav-justified" id="myTab" role="tablist">
<li class="nav-item">
<a class="nav-link active" id="login-tab" data-toggle="tab" href="#login" role="tab">Login</a>
</li>
<li class="nav-item">
<a class="nav-link" id="signup-tab" data-toggle="tab" href="#signup" role="tab">Signup</a>
</li>
</ul>
<div class="tab-content mt-4" id="myTabContent">
<div class="tab-pane fade show active" id="login" role="tabpanel">
<h4 class="title text-center mb-4">Login into account</h4>
<form class="form-box px-3">
<div class="form-input">
<span><i class="fa fa-envelope-o"></i></span>
<input type="email" placeholder="Email Address" required>
</div>
<div class="form-input">
<span><i class="fa fa-key"></i></span>
<input type="password" placeholder="Password" required>
</div>
<div class="mb-3">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="cb1">
<label class="custom-control-label" for="cb1">Remember me</label>
</div>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-block text-uppercase">Login</button>
</div>
<div class="text-right">
<a href="#" class="forget-link">Forget Password?</a>
</div>
<div class="text-center mb-3">or login with</div>
<div class="row mb-3">
<div class="col-4">
<a href="#" class="btn btn-block btn-social btn-facebook">
<i class="fa fa-facebook"></i>
</a>
</div>
<div class="col-4">
<a href="#" class="btn btn-block btn-social btn-google">
<i class="fa fa-google"></i>
</a>
</div>
<div class="col-4">
<a href="#" class="btn btn-block btn-social btn-twitter">
<i class="fa fa-twitter"></i>
</a>
</div>
</div>
</form>
</div>
<div class="tab-pane fade" id="signup" role="tabpanel">
<h4 class="title text-center mb-4">Create an Account</h4>
<form class="form-box px-3">
<div class="form-input">
<span><i class="fa fa-user"></i></span>
<input type="text" placeholder="Full Name" required>
</div>
<div class="form-input">
<span><i class="fa fa-envelope-o"></i></span>
<input type="email" placeholder="Email Address" required>
</div>
<div class="form-input">
<span><i class="fa fa-key"></i></span>
<input type="password" placeholder="Password" required>
</div>
<div class="form-input">
<span><i class="fa fa-key"></i></span>
<input type="password" placeholder="Confirm Password" required>
</div>
<div class="mb-3">
<button type="submit" class="btn btn-block text-uppercase">Signup</button>
</div>
<div class="text-center mb-3">or signup with</div>
<div class="row mb-3">
<div class="col-4">
<a href="#" class="btn btn-block btn-social btn-facebook">
<i class="fa fa-facebook"></i>
</a>
</div>
<div class="col-4">
<a href="#" class="btn btn-block btn-social btn-google">
<i class="fa fa-google"></i>
</a>
</div>
<div class="col-4">
<a href="#" class="btn btn-block btn-social btn-twitter">
<i class="fa fa-twitter"></i>
</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
CSS
body {
height: 100vh;
background: #0062E6 !important;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.card {
overflow: hidden;
border: 0 !important;
border-radius: 20px !important;
box-shadow: 0 0.5rem 1rem 0 rgba(0, 0, 0, 0.1);
}
.img-left {
width: 45%;
background: url('img.jpg') center;
background-size: cover;
}
.card-body {
padding: 2rem;
}
.title {
margin-bottom: 1.5rem;
font-weight: bold;
color: #333;
}
/* ---- Tabs Styling Fix ---- */
.nav-tabs {
border-bottom: none;
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
.nav-tabs .nav-item {
flex: 1;
text-align: center;
}
.nav-tabs .nav-link {
border: none !important;
border-radius: 30px !important;
margin: 0 5px;
background: #f1f1f1;
color: #333;
font-weight: 600;
text-align: center;
transition: 0.3s;
padding: 10px 0;
}
.nav-tabs .nav-link.active {
background: #007bff !important;
color: #fff !important;
box-shadow: none !important;
}
/* ---- Form Styling ---- */
.form-input {
position: relative;
}
.form-input input {
width: 100%;
height: 45px;
padding-left: 40px;
margin-bottom: 20px;
box-sizing: border-box;
border: 1px solid #00000020;
border-radius: 50px;
outline: none;
background: transparent;
transition: 0.3s;
}
.form-input span {
position: absolute;
top: 10px;
padding-left: 15px;
color: #007bff;
}
.form-input input::placeholder {
color: black;
}
.form-input input:focus,
.form-input input:valid {
border: 2px solid #007bff;
}
.form-input input:focus::placeholder {
color: #454b69;
}
.custom-checkbox .custom-control-input:checked ~ .custom-control-label::before {
background-color: #007bff !important;
border: 0px;
}
/* ---- Buttons ---- */
.form-box button[type="submit"] {
margin-top: 10px;
border: none;
cursor: pointer;
border-radius: 50px;
background: #007bff;
color: #fff;
font-size: 90%;
font-weight: bold;
letter-spacing: .1rem;
transition: 0.5s;
padding: 12px;
}
.form-box button[type="submit"]:hover {
background: #0069d9;
}
/* ---- Links ---- */
.forget-link,
.register-link {
color: #007bff;
font-weight: bold;
}
.forget-link:hover,
.register-link:hover {
color: #0069d9;
text-decoration: none;
}
/* ---- Social Buttons ---- */
.form-box .btn-social {
color: white !important;
border: 0;
font-weight: bold;
border-radius: 50px;
transition: 0.3s;
}
.form-box .btn-facebook {
background: #4866a8;
}
.form-box .btn-google {
background: #da3f34;
}
.form-box .btn-twitter {
background: #33ccff;
}
.form-box .btn-facebook:hover {
background: #3d578f;
}
.form-box .btn-google:hover {
background: #bf3b31;
}
.form-box .btn-twitter:hover {
background: #2eb7e5;
}