Build Beautiful Login and Register Pages
Hey there! When I first started designing websites, I quickly realized that login and register pages are more than just functional forms—they’re the first impression users get of a website. A well-designed login or register page can make users feel welcomed and confident in using your site. In this article, I’ll share simple tips and tricks to create attractive, user-friendly login and register pages that not only look great but also improve the overall user experience. Login Page: Register Page: Creating attractive login and register pages is all about balancing aesthetics with functionality. By focusing on clean layouts, appealing color schemes, and user-friendly features, you can craft pages that leave a lasting impression. I’ve learned that small details, like clear button designs or responsive layouts, can make a big difference in how users perceive your website. So, go ahead and experiment with these tips, and don’t be afraid to add your personal touch to make your designs stand out! You might also like :
Step-by-Step Guide to Building Beautiful Login and Register Pages
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href='https://unpkg.com/[email protected]/css/boxicons.min.css' rel='stylesheet'>
<title>Login Page</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(120deg, #d6d1fd, #f4f3ff );
}
.container{
position: relative;
width: 850px;
height: 550px;
background-color: #ece9fe;
border-radius: 30px;
margin: 20px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
.form-box{
position: absolute;
height: 100%;
width: 50%;
background: #ece9fe;
right: 0;
display: flex;
align-items: center;
color: #291263;
text-align: center;
padding: 40px;
z-index: 1;
transition: 0.5s ease-in-out 1s, visibility 0s 1s;
}
.container.active .form-box{
right: 50%;
}
.form-box.register{
visibility: hidden;
}
.container.active .form-box.register{
visibility: visible;
}
form{
width: 100%;
}
.container h1{
font-size: 33px;
margin: -10px 0;
}
.input-box{
position: relative;
margin: 30px 0;
}
.input-box input{
width: 100%;
padding: 13px 50px 13px 20px;
background: #d6d1fd;
border-radius: 8px;
border: none;
outline: none;
font-size: 14px;
font-weight: 500;
color: #a18df8;
}
.input-box input::placeholder{
color: #291263;
font-weight: 400;
}
.input-box i{
position: absolute;
right: 20px;
top: 50%;
transform: translateY(-50%);
font-size: 18px;
color: #291263;
}
.forget-link{
margin: -15px 0 15px;
}
.forget-link a{
font-size: 12.5px;
color: #291263;
text-decoration: none;
}
.btn{
width: 100%;
height: 48px;
background-color: #291263;
border-radius: 8px;
box-shadow: 0 0 10px rgb(0, 0, 0, 0.1);
font-size: 14px;
border: none;
cursor: pointer;
color: #f4f3ff;
font-weight: 600;
}
.container p{
font-size: 12.5px;
margin: 15px 0;
}
.social-icons{
display: flex;
justify-content: center;
}
.social-icons a{
display: inline-flex;
padding: 10px;
border: 1px solid #291263;
border-radius: 8px;
font-size: 22px;
color: #291263;
text-decoration: none;
margin: 0 8px;
}
.toggle-box{
position: absolute;
width: 100%;
height: 100%;
}
.toggle-box::before{
content: '';
position: absolute;
width: 300%;
height: 100%;
left: -250%;
border-radius: 100px;
background-color: #a18df8;
z-index: 2;
transition: 1.4s ease-in-out;
}
.container.active .toggle-box::before{
left: 50%;
}
.toggle-panel{
position: absolute;
width: 50%;
height: 100%;
color: #ece9fe;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 2;
transition: 0.5s ease-in-out;
}
.toggle-panel.toggle-left{
left: 0;
transition-delay: 1s;
}
.container.active .toggle-panel.toggle-left{
left: -50%;
transition-delay: 0.5s;
}
.toggle-panel.toggle-right{
right: -50%;
transition-delay: 0.5s;
}
.container.active .toggle-panel.toggle-right{
right: 0;
transition-delay: 1s;
}
.toggle-panel p{
margin-bottom: 20px ;
}
.toggle-panel .btn{
width: 160px;
height: 46px;
background: transparent;
border: 2px solid #ece9fe;
color: #ece9fe;
box-shadow: none;
}
@media screen and (max-width: 650px){
.container{
height: calc(100vh - 40px);
}
.form-box{
width: 100%;
height: 70%;
bottom: 0;
}
.container.active .form-box{
right: 0;
bottom: 30%;
}
.toggle-box::before{
left: 0;
top: -270%;
width: 100%;
height: 300%;
border-radius: 20vw;
}
.container.active .toggle-box::before{
left: 0;
top: 70%;
}
.toggle-panel{
width: 100%;
height: 30%;
}
.toggle-panel.toggle-left{
top: 0;
}
.container.active .toggle-panel.toggle-left{
left: 0;
top: -30%;
}
.toggle-panel.toggle-right{
right: 0;
bottom: -30%;
}
.container.active .toggle-panel.toggle-right{
bottom: 0;
}
}
@media screen and (max-width: 400px){
.form-box{
padding: 20px;
}
.toggle-panel h1{
font-size: 30px;
}
}
</style>
</head>
<body>
<div class="container">
<div class="form-box login">
<form action="">
<h1>Login</h1>
<div class="input-box">
<input type="text" placeholder="Username" required>
<i class='bx bxs-user'></i>
</div>
<div class="input-box">
<input type="password" placeholder="password" required>
<i class='bx bxs-lock-alt' ></i>
</div>
<div class="forget-link">
<a href="#">Forgot Password?</a>
</div>
<button type="submit" class="btn">Login</button>
<p>Or login with social platforms</p>
<div class="social-icons">
<a href="#"><i class='bx bxl-google' ></i></a>
<a href="#"><i class='bx bxl-facebook-circle' ></i></a>
<a href="#"><i class='bx bxl-github' ></i></a>
<a href="#"><i class='bx bxl-linkedin' ></i></a>
</div>
</form>
</div>
<div class="form-box register">
<form action="">
<h1>Registerion</h1>
<div class="input-box">
<input type="text" placeholder="Username" required>
<i class='bx bxs-user'></i>
</div>
<div class="input-box">
<input type="email" placeholder="Email" required>
<i class='bx bxs-envelope'></i>
</div>
<div class="input-box">
<input type="password" placeholder="password" required>
<i class='bx bxs-lock-alt' ></i>
</div>
<button type="submit" class="btn">Register</button>
<p>Or register with social platforms</p>
<div class="social-icons">
<a href="#"><i class='bx bxl-google' ></i></a>
<a href="#"><i class='bx bxl-facebook-circle' ></i></a>
<a href="#"><i class='bx bxl-github' ></i></a>
<a href="#"><i class='bx bxl-linkedin' ></i></a>
</div>
</form>
</div>
<div class="toggle-box">
<div class="toggle-panel toggle-left">
<h1>Hello, Welcome!</h1>
<p>Don't have an account?</p>
<button class="btn register-btn">Register</button>
</div>
<div class="toggle-panel toggle-right">
<h1>Welcome Back!</h1>
<p>Already have an account?</p>
<button class="btn login-btn">Login</button>
</div>
</div>
</div>
</body>
</html>
<script>
const container = document.querySelector('.container');
const register = document.querySelector('.register-btn');
const login = document.querySelector('.login-btn');
register.addEventListener("click", ()=>{
container.classList.add("active");
})
login.addEventListener("click", ()=>{
container.classList.remove("active");
})
</script>
Conclusion
