Master Frontend to Backend eBook Banner
login signup form html css

Login Signup Form Using HTML and CSS Code

Login Signup Form Using HTML and CSS Code

Welcome to the Codewithrandom blog. In this blog, We learn how to create a Login Signup Form. We use HTML and CSS  for Login Signup Form.

I hope you enjoy our blog so let’s start with a basic html structure for the Login Signup Form.

Here is Preview 👇 Login Signup Form With HTML and CSS Code

Login Signup Form Using HTML and CSS
Login Signup Form Using HTML and CSS

 

 

HTML Code For Login Signup Form

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Log In / Sign Up </title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="section">
<div class="container">
<div class="row full-height justify-content-center">
<div class="col-12 text-center align-self-center py-5">
<div class="section pb-5 pt-5 pt-sm-2 text-center">
<h6 class="mb-0 pb-3"><span>Log In </span><span>Sign Up</span></h6>
<input class="checkbox" type="checkbox" id="reg-log" name="reg-log"/>
<label for="reg-log"></label>
<div class="card-3d-wrap mx-auto">
<div class="card-3d-wrapper">
<div class="card-front">
<div class="center-wrap">
<div class="section text-center">
<h4 class="mb-4 pb-3">Log In</h4>
<div class="form-group">
<input type="email" name="logemail" class="form-style" placeholder="Your Email" id="logemail" autocomplete="off">
<i class="input-icon uil uil-at"></i>
</div>
<div class="form-group mt-2">
<input type="password" name="logpass" class="form-style" placeholder="Your Password" id="logpass" autocomplete="off">
<i class="input-icon uil uil-lock-alt"></i>
</div>
<a href="#" class="btn mt-4">submit</a>
<p class="mb-0 mt-4 text-center"><a href="#0" class="link">Forgot your password?</a></p>
</div>
</div>
</div>
<div class="card-back">
<div class="center-wrap">
<div class="section text-center">
<h4 class="mb-4 pb-3">Sign Up</h4>
<div class="form-group">
<input type="text" name="logname" class="form-style" placeholder="Your Full Name" id="logname" autocomplete="off">
<i class="input-icon uil uil-user"></i>
</div>
<div class="form-group mt-2">
<input type="email" name="logemail" class="form-style" placeholder="Your Email" id="logemail" autocomplete="off">
<i class="input-icon uil uil-at"></i>
</div>
<div class="form-group mt-2">
<input type="password" name="logpass" class="form-style" placeholder="Your Password" id="logpass" autocomplete="off">
<i class="input-icon uil uil-lock-alt"></i>
</div>
<a href="#" class="btn mt-4">submit</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

There is all the HTML code for the login / Sign Up Form. Now, you can see output without CSS, then we write CSS for the Style and give a 3d effect in the login / Sign Up Form.

Restaurant Website Using HTML and CSS

Output

Login Signup Form Using HTML and CSS

CSS Code For Login Signup Form

@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700,800,900');  
@import url('https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css');  
@import url('https://unicons.iconscout.com/release/v2.1.9/css/unicons.css');  
body{  
     font-family: 'Poppins', sans-serif;  
     font-weight: 300;  
     font-size: 15px;  
     line-height: 1.7;  
     color: #c4c3ca;  
     background-color: #1f2029;  
     overflow-x: hidden;  
}  
a {  
     cursor: pointer;  
 transition: all 200ms linear;  
}  
a:hover {  
     text-decoration: none;  
}  
.link {  
 color: #c4c3ca;  
}  
.link:hover {  
 color: #ffeba7;  
}  
p {  
 font-weight: 500;  
 font-size: 14px;  
 line-height: 1.7;  
}  
h4 {  
 font-weight: 600;  
}  
h6 span{  
 padding: 0 20px;  
 text-transform: uppercase;  
 font-weight: 700;  
}  
.section{  
 position: relative;  
 width: 100%;  
 display: block;  
}  
.full-height{  
 min-height: 100vh;  
}  
[type="checkbox"]:checked,  
[type="checkbox"]:not(:checked){  
 position: absolute;  
 left: -9999px;  
}  
.checkbox:checked + label,  
.checkbox:not(:checked) + label{  
 position: relative;  
 display: block;  
 text-align: center;  
 width: 60px;  
 height: 16px;  
 border-radius: 8px;  
 padding: 0;  
 margin: 10px auto;  
 cursor: pointer;  
 background-color: #ffeba7;  
}  
.checkbox:checked + label:before,  
.checkbox:not(:checked) + label:before{  
 position: absolute;  
 display: block;  
 width: 36px;  
 height: 36px;  
 border-radius: 50%;  
 color: #ffeba7;  
 background-color: #102770;  
 font-family: 'unicons';  
 content: 'eb4f';  
 z-index: 20;  
 top: -10px;  
 left: -10px;  
 line-height: 36px;  
 text-align: center;  
 font-size: 24px;  
 transition: all 0.5s ease;  
}  
.checkbox:checked + label:before {  
 transform: translateX(44px) rotate(-270deg);  
}  
.card-3d-wrap {  
 position: relative;  
 width: 440px;  
 max-width: 100%;  
 height: 400px;  
 -webkit-transform-style: preserve-3d;  
 transform-style: preserve-3d;  
 perspective: 800px;  
 margin-top: 60px;  
}  
.card-3d-wrapper {  
 width: 100%;  
 height: 100%;  
 position:absolute;    
 top: 0;  
 left: 0;   
 -webkit-transform-style: preserve-3d;  
 transform-style: preserve-3d;  
 transition: all 600ms ease-out;   
}  
.card-front, .card-back {  
 width: 100%;  
 height: 100%;  
 background-color: #2a2b38;  
 background-image: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/1462889/pat.svg');  
 background-position: bottom center;  
 background-repeat: no-repeat;  
 background-size: 300%;  
 position: absolute;  
 border-radius: 6px;  
 left: 0;  
 top: 0;  
 -webkit-transform-style: preserve-3d;  
 transform-style: preserve-3d;  
 -webkit-backface-visibility: hidden;  
 -moz-backface-visibility: hidden;  
 -o-backface-visibility: hidden;  
 backface-visibility: hidden;  
}  
.card-back {  
 transform: rotateY(180deg);  
}  
.checkbox:checked ~ .card-3d-wrap .card-3d-wrapper {  
 transform: rotateY(180deg);  
}  
.center-wrap{  
 position: absolute;  
 width: 100%;  
 padding: 0 35px;  
 top: 50%;  
 left: 0;  
 transform: translate3d(0, -50%, 35px) perspective(100px);  
 z-index: 20;  
 display: block;  
}  
.form-group{   
 position: relative;  
 display: block;  
  margin: 0;  
  padding: 0;  
}  
.form-style {  
 padding: 13px 20px;  
 padding-left: 55px;  
 height: 48px;  
 width: 100%;  
 font-weight: 500;  
 border-radius: 4px;  
 font-size: 14px;  
 line-height: 22px;  
 letter-spacing: 0.5px;  
 outline: none;  
 color: #c4c3ca;  
 background-color: #1f2029;  
 border: none;  
 -webkit-transition: all 200ms linear;  
 transition: all 200ms linear;  
 box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);  
}  
.form-style:focus,  
.form-style:active {  
 border: none;  
 outline: none;  
 box-shadow: 0 4px 8px 0 rgba(21,21,21,.2);  
}  
.input-icon {  
 position: absolute;  
 top: 0;  
 left: 18px;  
 height: 48px;  
 font-size: 24px;  
 line-height: 48px;  
 text-align: left;  
 color: #ffeba7;  
 -webkit-transition: all 200ms linear;  
  transition: all 200ms linear;  
}  
.form-group input:-ms-input-placeholder {  
 color: #c4c3ca;  
 opacity: 0.7;  
 -webkit-transition: all 200ms linear;  
  transition: all 200ms linear;  
}  
.form-group input::-moz-placeholder {  
 color: #c4c3ca;  
 opacity: 0.7;  
 -webkit-transition: all 200ms linear;  
  transition: all 200ms linear;  
}  
.form-group input:-moz-placeholder {  
 color: #c4c3ca;  
 opacity: 0.7;  
 -webkit-transition: all 200ms linear;  
  transition: all 200ms linear;  
}  
.form-group input::-webkit-input-placeholder {  
 color: #c4c3ca;  
 opacity: 0.7;  
 -webkit-transition: all 200ms linear;  
  transition: all 200ms linear;  
}  
.form-group input:focus:-ms-input-placeholder {  
 opacity: 0;  
 -webkit-transition: all 200ms linear;  
  transition: all 200ms linear;  
}  
.form-group input:focus::-moz-placeholder {  
 opacity: 0;  
 -webkit-transition: all 200ms linear;  
  transition: all 200ms linear;  
}  
.form-group input:focus:-moz-placeholder {  
 opacity: 0;  
 -webkit-transition: all 200ms linear;  
  transition: all 200ms linear;  
}  
.form-group input:focus::-webkit-input-placeholder {  
 opacity: 0;  
 -webkit-transition: all 200ms linear;  
  transition: all 200ms linear;  
}  
.btn{   
 border-radius: 4px;  
 height: 44px;  
 font-size: 13px;  
 font-weight: 600;  
 text-transform: uppercase;  
 -webkit-transition : all 200ms linear;  
 transition: all 200ms linear;  
 padding: 0 30px;  
 letter-spacing: 1px;  
 display: -webkit-inline-flex;  
 display: -ms-inline-flexbox;  
 display: inline-flex;  
 -webkit-align-items: center;  
 -moz-align-items: center;  
 -ms-align-items: center;  
 align-items: center;  
 -webkit-justify-content: center;  
 -moz-justify-content: center;  
 -ms-justify-content: center;  
 justify-content: center;  
 -ms-flex-pack: center;  
 text-align: center;  
 border: none;  
 background-color: #ffeba7;  
 color: #102770;  
 box-shadow: 0 8px 24px 0 rgba(255,235,167,.2);  
}  
.btn:active,  
.btn:focus{   
 background-color: #102770;  
 color: #ffeba7;  
 box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);  
}  
.btn:hover{   
 background-color: #102770;  
 color: #ffeba7;  
 box-shadow: 0 8px 24px 0 rgba(16,39,112,.2);  
}

We have completed our CSS section,  Here is our final updated output HTML + CSS.

Create A Travel Website Using HTML & CSS

Final Output Of Login Signup Form Using Html & CSS

Login Signup Form Using HTML and CSS
Login Signup Form Using HTML and CSS
Login Signup Form Using HTML and CSS
Login Signup Form Using HTML and CSS

 

50+ HTML, CSS & JavaScript Projects With Source Code

Here is our updated output with  CSS. Hope you like the login / Sign Up Form, you can see output project screenshots. See our other blogs and gain knowledge in front-end development.

Thank you!

In this post, we learn how to create a Login Signup Form Using HTML and CSS Code. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Thank You And Keep Learning!!!

Written by – Code With Random/Anki

Code By – Ivan Grozdic



Tags: , ,

Leave a Reply