Introduction
Today we will learn about How To Create Enhanced Social Login Form.
HTML STRUCTURE
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Enhanced Social Login Form</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-6 offset-md-3">
<h2 class="text-center mb-4">Enhanced Social Login Form</h2>
<div class="card">
<div class="card-body">
<form>
<div class="mb-3">
<button type="button" class="btn btn-primary w-100">
<i class="fab fa-facebook-f"></i> Login with Facebook
</button>
</div>
<div class="mb-3">
<button type="button" class="btn btn-danger w-100">
<i class="fab fa-google"></i> Login with Google
</button>
</div>
<div class="mb-3">
<button type="button" class="btn btn-info w-100">
<i class="fab fa-twitter"></i> Login with Twitter
</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</body>
</html>CSS STRUCTURE
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Font Awesome for Icons -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" rel="stylesheet">
<style>
body {
background-color: #f4f7f6;
margin-top: 50px;
}
.card {
border: none;
border-radius: 10px;
box-shadow: 0 6px 12px rgba(0,0,0,.1);
}
.btn {
font-size: 16px;
border-radius: 25px;
padding: 10px 20px;
margin: 5px 0;
}
.btn i {
margin-right: 8px;
}
</style>JAVASCRIPT AND JQUERY
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>CODE INCLUDE
This Login Form code includes the mentioned things
- HTML Code
- CSS Code
- JavaScript Code
Enhanced Social LOGIN FORM FEATURES
- Desktop View is Perfect
- Mobile View is Perfect
- Include Bootstrap CDN Library
- Live Webpage Preview Button
How To Create Enhanced Social Login Form. Manglastubh By Ankit Akolkar. Search on Google Free Online Courses.
Welcome to Manglastubh By Ankit Akolkar. Manglastubh website is designed and developed for all kinds of Knowledge-Based Blogs and Articles. Everyone will gain knowledge over here from this website.
