Awesome Input Animation using HTML & CSS | Floating Label Animation
<!DOCTYPE html>
<!-- Created By techno-ahmad -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Input Animation | techno-ahmad</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="input-data">
<input type="text" required>
<div class="underline">
</div>
<label>Name</label>
</div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
background: linear-gradient(-135deg, #c850c0, #4158d0);
}
.wrapper{
width: 450px;
background: #fff;
padding: 30px;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.wrapper .input-data{
height: 40px;
width: 100%;
position: relative;
}
.wrapper .input-data input{
height: 100%;
width: 100%;
border: none;
font-size: 17px;
border-bottom: 2px solid silver;
}
.input-data input:focus ~ label,
.input-data input:valid ~ label{
transform: translateY(-20px);
font-size: 15px;
color: #4158d0;
}
.wrapper .input-data label{
position: absolute;
bottom: 10px;
left: 0;
color: grey;
pointer-events: none;
transition: all 0.3s ease;
}
.input-data .underline{
position: absolute;
height: 2px;
width: 100%;
bottom: 0;
}
.input-data .underline:before{
position: absolute;
content: "";
height: 100%;
width: 100%;
background: #4158d0;
transform: scaleX(0);
transform-origin: center;
transition: transform 0.3s ease;
}
.input-data input:focus ~ .underline:before,
.input-data input:valid ~ .underline:before{
transform: scaleX(1);
}
Popup Login Form Design in HTML & CSS
<!DOCTYPE html>
<!-- Created By techno-ahmad -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Popup Login Form Design | techno-ahmad</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="center">
<input type="checkbox" id="show">
<label for="show" class="show-btn">View Form</label>
<div class="container">
<label for="show" class="close-btn fas fa-times" title="close"></label>
<div class="text">
Login Form</div>
<form action="#">
<div class="data">
<label>Email or Phone</label>
<input type="text" required>
</div>
<div class="data">
<label>Password</label>
<input type="password" required>
</div>
<div class="forgot-pass">
<a href="#">Forgot Password?</a></div>
<div class="btn">
<div class="inner">
</div>
<button type="submit">login</button>
</div>
<div class="signup-link">
Not a member? <a href="#">Signup now</a></div>
</form>
</div>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
outline: none;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
width: 100%;
background: linear-gradient(115deg, #56d8e4 10%, #9f01ea 90%);
}
.show-btn{
background: #fff;
padding: 10px 20px;
font-size: 20px;
font-weight: 500;
color: #3498db;
cursor: pointer;
box-shadow: 0px 0px 10px rgba(0,0,0,0.1);
}
.show-btn, .container{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
input[type="checkbox"]{
display: none;
}
.container{
display: none;
background: #fff;
width: 410px;
padding: 30px;
box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
#show:checked ~ .container{
display: block;
}
.container .close-btn{
position: absolute;
right: 20px;
top: 15px;
font-size: 18px;
cursor: pointer;
}
.container .close-btn:hover{
color: #3498db;
}
.container .text{
font-size: 35px;
font-weight: 600;
text-align: center;
}
.container form{
margin-top: -20px;
}
.container form .data{
height: 45px;
width: 100%;
margin: 40px 0;
}
form .data label{
font-size: 18px;
}
form .data input{
height: 100%;
width: 100%;
padding-left: 10px;
font-size: 17px;
border: 1px solid silver;
}
form .data input:focus{
border-color: #3498db;
border-bottom-width: 2px;
}
form .forgot-pass{
margin-top: -8px;
}
form .forgot-pass a{
color: #3498db;
text-decoration: none;
}
form .forgot-pass a:hover{
text-decoration: underline;
}
form .btn{
margin: 30px 0;
height: 45px;
width: 100%;
position: relative;
overflow: hidden;
}
form .btn .inner{
height: 100%;
width: 300%;
position: absolute;
left: -100%;
z-index: -1;
background: -webkit-linear-gradient(right, #56d8e4, #9f01ea, #56d8e4, #9f01ea);
transition: all 0.4s;
}
form .btn:hover .inner{
left: 0;
}
form .btn button{
height: 100%;
width: 100%;
background: none;
border: none;
color: #fff;
font-size: 18px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
cursor: pointer;
}
form .signup-link{
text-align: center;
}
form .signup-link a{
color: #3498db;
text-decoration: none;
}
form .signup-link a:hover{
text-decoration: underline;
}
Multi Step Form with Step Progress Bar in HTML CSS & JavaScript
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
outline: none;
font-family: 'Poppins', sans-serif;
}
body{
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
overflow: hidden;
background: url("bg.png"), -webkit-linear-gradient(bottom, #0250c5, #d43f8d);
}
::selection{
color: #fff;
background: #d43f8d;
}
.container{
width: 330px;
background: #fff;
text-align: center;
border-radius: 5px;
padding: 50px 35px 10px 35px;
}
.container header{
font-size: 35px;
font-weight: 600;
margin: 0 0 30px 0;
}
.container .form-outer{
width: 100%;
overflow: hidden;
}
.container .form-outer form{
display: flex;
width: 400%;
}
.form-outer form .page{
width: 25%;
transition: margin-left 0.3s ease-in-out;
}
.form-outer form .page .title{
text-align: left;
font-size: 25px;
font-weight: 500;
}
.form-outer form .page .field{
width: 330px;
height: 45px;
margin: 45px 0;
display: flex;
position: relative;
}
form .page .field .label{
position: absolute;
top: -30px;
font-weight: 500;
}
form .page .field input{
height: 100%;
width: 100%;
border: 1px solid lightgrey;
border-radius: 5px;
padding-left: 15px;
font-size: 18px;
}
form .page .field select{
width: 100%;
padding-left: 10px;
font-size: 17px;
font-weight: 500;
}
form .page .field button{
width: 100%;
height: calc(100% + 5px);
border: none;
background: #d33f8d;
margin-top: -20px;
border-radius: 5px;
color: #fff;
cursor: pointer;
font-size: 18px;
font-weight: 500;
letter-spacing: 1px;
text-transform: uppercase;
transition: 0.5s ease;
}
form .page .field button:hover{
background: #000;
}
form .page .btns button{
margin-top: -20px!important;
}
form .page .btns button.prev{
margin-right: 3px;
font-size: 17px;
}
form .page .btns button.next{
margin-left: 3px;
}
.container .progress-bar{
display: flex;
margin: 40px 0;
user-select: none;
}
.container .progress-bar .step{
text-align: center;
width: 100%;
position: relative;
}
.container .progress-bar .step p{
font-weight: 500;
font-size: 18px;
color: #000;
margin-bottom: 8px;
}
.progress-bar .step .bullet{
height: 25px;
width: 25px;
border: 2px solid #000;
display: inline-block;
border-radius: 50%;
position: relative;
transition: 0.2s;
font-weight: 500;
font-size: 17px;
line-height: 25px;
}
.progress-bar .step .bullet.active{
border-color: #d43f8d;
background: #d43f8d;
}
.progress-bar .step .bullet span{
position: absolute;
left: 50%;
transform: translateX(-50%);
}
.progress-bar .step .bullet.active span{
display: none;
}
.progress-bar .step .bullet:before,
.progress-bar .step .bullet:after{
position: absolute;
content: '';
bottom: 11px;
right: -51px;
height: 3px;
width: 44px;
background: #262626;
}
.progress-bar .step .bullet.active:after{
background: #d43f8d;
transform: scaleX(0);
transform-origin: left;
animation: animate 0.3s linear forwards;
}
@keyframes animate {
100%{
transform: scaleX(1);
}
}
.progress-bar .step:last-child .bullet:before,
.progress-bar .step:last-child .bullet:after{
display: none;
}
.progress-bar .step p.active{
color: #d43f8d;
transition: 0.2s linear;
}
.progress-bar .step .check{
position: absolute;
left: 50%;
top: 70%;
font-size: 15px;
transform: translate(-50%, -50%);
display: none;
}
.progress-bar .step .check.active{
display: block;
color: #fff;
}
CSS
<!-- Created By techno-ahmad -->
const slidePage = document.querySelector(".slide-page");
const nextBtnFirst = document.querySelector(".firstNext");
const prevBtnSec = document.querySelector(".prev-1");
const nextBtnSec = document.querySelector(".next-1");
const prevBtnThird = document.querySelector(".prev-2");
const nextBtnThird = document.querySelector(".next-2");
const prevBtnFourth = document.querySelector(".prev-3");
const submitBtn = document.querySelector(".submit");
const progressText = [...document.querySelectorAll(".step p")];
const progressCheck = [...document.querySelectorAll(".step .check")];
const bullet = [...document.querySelectorAll(".step .bullet")];
let max = 4;
let current = 1;
nextBtnFirst.addEventListener("click", function(){
slidePage.style.marginLeft = "-25%";
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
});
nextBtnSec.addEventListener("click", function(){
slidePage.style.marginLeft = "-50%";
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
});
nextBtnThird.addEventListener("click", function(){
slidePage.style.marginLeft = "-75%";
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
});
submitBtn.addEventListener("click", function(){
bullet[current - 1].classList.add("active");
progressCheck[current - 1].classList.add("active");
progressText[current - 1].classList.add("active");
current += 1;
setTimeout(function(){
alert("Your Form Successfully Signed up");
location.reload();
},800);
});
prevBtnSec.addEventListener("click", function(){
slidePage.style.marginLeft = "0%";
bullet[current - 2].classList.remove("active");
progressCheck[current - 2].classList.remove("active");
progressText[current - 2].classList.remove("active");
current -= 1;
});
prevBtnThird.addEventListener("click", function(){
slidePage.style.marginLeft = "-25%";
bullet[current - 2].classList.remove("active");
progressCheck[current - 2].classList.remove("active");
progressText[current - 2].classList.remove("active");
current -= 1;
});
prevBtnFourth.addEventListener("click", function(){
slidePage.style.marginLeft = "-50%";
bullet[current - 2].classList.remove("active");
progressCheck[current - 2].classList.remove("active");
progressText[current - 2].classList.remove("active");
current -= 1;
});
Cool Login Form in HTML CSS & JavaScript
<!DOCTYPE html>
<!-- Created By techno-ahmad -->
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Login Form</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
</head>
<body>
<div class="center">
<div class="header">
Login Form</div>
<form>
<input type="text" placeholder="Email or Username">
<i class="far fa-envelope"></i>
<input id="pswrd" type="password" placeholder="Password">
<i class="fas fa-lock" onclick="show()"></i>
<input type="submit" value="Sign in">
<a href="#">Forgot Password?</a>
</form>
</div>
<script>
function show(){
var pswrd = document.getElementById('pswrd');
var icon = document.querySelector('.fas');
if (pswrd.type === "password") {
pswrd.type = "text";
pswrd.style.marginTop = "20px";
icon.style.color = "#7f2092";
}else{
pswrd.type = "password";
icon.style.color = "grey";
}
}
</script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+TC&display=swap');
body{
margin: 0;
padding: 0;
background: radial-gradient(#a429bc,#9225a7,#7f2092);
height: 100vh;
overflow: hidden;
font-family: 'Noto Sans TC', sans-serif;
}
.center{
width: 430px;
margin: 130px auto;
position: relative;
}
.center .header{
font-size: 28px;
font-weight: bold;
color: white;
padding: 25px 0 30px 25px;
background: #5c1769;
border-bottom: 1px solid #370e3f;
border-radius: 5px 5px 0 0;
}
.center form{
position: absolute;
background: white;
width: 100%;
padding: 50px 10px 0 30px;
box-sizing: border-box;
border: 1px solid #6d1c7d;
border-radius: 0 0 5px 5px;
}
form input{
height: 50px;
width: 90%;
padding: 0 10px;
border-radius: 3px;
border: 1px solid silver;
font-size: 18px;
outline: none;
}
form input[type="password"]{
margin-top: 20px;
}
form i{
position: absolute;
font-size: 25px;
color: grey;
margin: 15px 0 0 -45px;
}
i.fa-lock{
margin-top: 35px;
}
form input[type="submit"]{
margin-top: 40px;
margin-bottom: 40px;
width: 130px;
height: 45px;
color: white;
cursor: pointer;
line-height: 45px;
border-radius: 45px;
border-radius: 5px;
background: #5c1769;
}
form input[type="submit"]:hover{
background: #491254;
transition: .5s;
}
form a{
text-decoration: none;
font-size: 18px;
color: #7f2092;
padding: 0 0 0 20px;
}
Animated Login Form using HTML CSS & JavaScript
<!DOCTYPE html>
<!-- Created By techno-ahmad -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Animated Login Form</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="container">
<header>Login Form</header>
<form>
<div class="input-field">
<input type="text" required>
<label>Email or Username</label>
</div>
<div class="input-field">
<input class="pswrd" type="password" required>
<span class="show">SHOW</span>
<label>Password</label>
</div>
<div class="button">
<div class="inner">
</div>
<button>LOGIN</button>
</div>
</form>
<div class="auth">
Or login with</div>
<div class="links">
<div class="facebook">
<i class="fab fa-facebook-square"><span>Facebook</span></i>
</div>
<div class="google">
<i class="fab fa-google-plus-square"><span>Google</span></i>
</div>
</div>
<div class="signup">
Not a member? <a href="#">Signup now</a>
</div>
</div>
<script>
var input = document.querySelector('.pswrd');
var show = document.querySelector('.show');
show.addEventListener('click', active);
function active(){
if(input.type === "password"){
input.type = "text";
show.style.color = "#1DA1F2";
show.textContent = "HIDE";
}else{
input.type = "password";
show.textContent = "SHOW";
show.style.color = "#111";
}
}
</script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Montserrat:600|Noto+Sans|Open+Sans:400,700&display=swap');
*{
margin: 0;
padding: 0;
border-radius: 5px;
box-sizing: border-box;
}
body{
height: 100vh;
display: flex;
align-items: center;
text-align: center;
font-family: sans-serif;
justify-content: center;
background: url(bg.jpg);
background-size: cover;
background-position: center;
}
.container{
position: relative;
width: 400px;
background: white;
padding: 60px 40px;
}
header{
font-size: 40px;
margin-bottom: 60px;
font-family: 'Montserrat', sans-serif;
}
.input-field, form .button{
margin: 25px 0;
position: relative;
height: 50px;
width: 100%;
}
.input-field input{
height: 100%;
width: 100%;
border: 1px solid silver;
padding-left: 15px;
outline: none;
font-size: 19px;
transition: .4s;
}
input:focus{
border: 1px solid #1DA1F2;
}
.input-field label, span.show{
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.input-field label{
left: 15px;
pointer-events: none;
color: grey;
font-size: 18px;
transition: .4s;
}
span.show{
right: 20px;
color: #111;
font-size: 14px;
font-weight: bold;
cursor: pointer;
user-select: none;
visibility: hidden;
font-family: 'Open Sans', sans-serif;
}
input:valid ~ span.show{
visibility: visible;
}
input:focus ~ label,
input:valid ~ label{
transform: translateY(-33px);
background: white;
font-size: 16px;
color: #1DA1F2;
}
form .button{
margin-top: 30px;
overflow: hidden;
z-index: 111;
}
.button .inner{
position: absolute;
height: 100%;
width: 300%;
left: -100%;
z-index: -1;
transition: all .4s;
background: -webkit-linear-gradient(right,#00dbde,#fc00ff,#00dbde,#fc00ff);
}
.button:hover .inner{
left: 0;
}
.button button{
width: 100%;
height: 100%;
border: none;
background: none;
outline: none;
color: white;
font-size: 20px;
cursor: pointer;
font-family: 'Montserrat', sans-serif;
}
.container .auth{
margin: 35px 0 20px 0;
font-size: 19px;
color: grey;
}
.links{
display: flex;
cursor: pointer;
}
.facebook, .google{
height: 40px;
width: 100%;
border: 1px solid silver;
border-radius: 3px;
margin: 0 10px;
transition: .4s;
}
.facebook:hover{
border: 1px solid #4267B2;
}
.google:hover{
border: 1px solid #dd4b39;
}
.facebook i, .facebook span{
color: #4267B2;
}
.google i, .google span{
color: #dd4b39;
}
.links i{
font-size: 23px;
line-height: 40px;
margin-left: -90px;
}
.links span{
position: absolute;
font-size: 17px;
font-weight: bold;
padding-left: 8px;
font-family: 'Open Sans', sans-serif;
}
.signup{
margin-top: 50px;
font-family: 'Noto Sans', sans-serif;
}
.signup a{
color: #3498db;
text-decoration: none;
}
.signup a:hover{
text-decoration: underline;
}
Neumorphism Login Form UI Design using HTML & CSS
<!DOCTYPE html>
<!-- Created By techno-ahmad -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Neumorphism Login Form UI | techno-ahmad</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="content">
<div class="text">
Login Form</div>
<form action="#">
<div class="field">
<input type="text" required>
<span class="fas fa-user"></span>
<label>Email or Phone</label>
</div>
<div class="field">
<input type="password" required>
<span class="fas fa-lock"></span>
<label>Password</label>
</div>
<div class="forgot-pass">
<a href="#">Forgot Password?</a></div>
<button>Sign in</button>
<div class="sign-up">
Not a member?
<a href="#">signup now</a>
</div>
</form>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
/* user-select: none; */
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
height: 100%;
}
body{
display: grid;
place-items: center;
background: #dde1e7;
text-align: center;
}
.content{
width: 330px;
padding: 40px 30px;
background: #dde1e7;
border-radius: 10px;
box-shadow: -3px -3px 7px #ffffff73,
2px 2px 5px rgba(94,104,121,0.288);
}
.content .text{
font-size: 33px;
font-weight: 600;
margin-bottom: 35px;
color: #595959;
}
.field{
height: 50px;
width: 100%;
display: flex;
position: relative;
}
.field:nth-child(2){
margin-top: 20px;
}
.field input{
height: 100%;
width: 100%;
padding-left: 45px;
outline: none;
border: none;
font-size: 18px;
background: #dde1e7;
color: #595959;
border-radius: 25px;
box-shadow: inset 2px 2px 5px #BABECC,
inset -5px -5px 10px #ffffff73;
}
.field input:focus{
box-shadow: inset 1px 1px 2px #BABECC,
inset -1px -1px 2px #ffffff73;
}
.field span{
position: absolute;
color: #595959;
width: 50px;
line-height: 50px;
}
.field label{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 45px;
pointer-events: none;
color: #666666;
}
.field input:valid ~ label{
opacity: 0;
}
.forgot-pass{
text-align: left;
margin: 10px 0 10px 5px;
}
.forgot-pass a{
font-size: 16px;
color: #3498db;
text-decoration: none;
}
.forgot-pass:hover a{
text-decoration: underline;
}
button{
margin: 15px 0;
width: 100%;
height: 50px;
font-size: 18px;
line-height: 50px;
font-weight: 600;
background: #dde1e7;
border-radius: 25px;
border: none;
outline: none;
cursor: pointer;
color: #595959;
box-shadow: 2px 2px 5px #BABECC,
-5px -5px 10px #ffffff73;
}
button:focus{
color: #3498db;
box-shadow: inset 2px 2px 5px #BABECC,
inset -5px -5px 10px #ffffff73;
}
.sign-up{
margin: 10px 0;
color: #595959;
font-size: 16px;
}
.sign-up a{
color: #3498db;
text-decoration: none;
}
.sign-up a:hover{
text-decoration: underline;
}
Animated Glowing Inputs Login Form in HTML & CSS
<!DOCTYPE html>
<!-- Created By techno-ahmad -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Glowing Inputs Login Form UI</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="login-form">
<div class="text">
LOGIN</div>
<form>
<div class="field">
<div class="fas fa-envelope">
</div>
<input type="text" placeholder="Email or Phone">
</div>
<div class="field">
<div class="fas fa-lock">
</div>
<input type="password" placeholder="Password">
</div>
<button>LOGIN</button>
<div class="link">
Not a member?
<a href="#">Signup now</a>
</div>
</form>
</div>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Poppins&display=swap');
*{
margin: 0;
padding: 0;
font-family: 'Poppins',sans-serif;
}
body{
display: flex;
height: 100vh;
text-align: center;
align-items: center;
justify-content: center;
background: #151515;
}
.login-form{
position: relative;
width: 370px;
height: auto;
background: #1b1b1b;
padding: 40px 35px 60px;
box-sizing: border-box;
border: 1px solid black;
border-radius: 5px;
box-shadow: inset 0 0 1px #272727;
}
.text{
font-size: 30px;
color: #c7c7c7;
font-weight: 600;
letter-spacing: 2px;
}
form{
margin-top: 40px;
}
form .field{
margin-top: 20px;
display: flex;
}
.field .fas{
height: 50px;
width: 60px;
color: #868686;
font-size: 20px;
line-height: 50px;
border: 1px solid #444;
border-right: none;
border-radius: 5px 0 0 5px;
background: linear-gradient(#333,#222);
}
.field input,form button{
height: 50px;
width: 100%;
outline: none;
font-size: 19px;
color: #868686;
padding: 0 15px;
border-radius: 0 5px 5px 0;
border: 1px solid #444;
caret-color: #339933;
background: linear-gradient(#333,#222);
}
input:focus{
color: #339933;
box-shadow: 0 0 5px rgba(0,255,0,.2),
inset 0 0 5px rgba(0,255,0,.1);
background: linear-gradient(#333933,#222922);
animation: glow .8s ease-out infinite alternate;
}
@keyframes glow {
0%{
border-color: #339933;
box-shadow: 0 0 5px rgba(0,255,0,.2),
inset 0 0 5px rgba(0,0,0,.1);
}
100%{
border-color: #6f6;
box-shadow: 0 0 20px rgba(0,255,0,.6),
inset 0 0 10px rgba(0,255,0,.4);
}
}
button{
margin-top: 30px;
border-radius: 5px!important;
font-weight: 600;
letter-spacing: 1px;
cursor: pointer;
}
button:hover{
color: #339933;
border: 1px solid #339933;
box-shadow: 0 0 5px rgba(0,255,0,.3),
0 0 10px rgba(0,255,0,.2),
0 0 15px rgba(0,255,0,.1),
0 2px 0 black;
}
.link{
margin-top: 25px;
color: #868686;
}
.link a{
color: #339933;
text-decoration: none;
}
.link a:hover{
text-decoration: underline;
}
Amazing Transparent Login Form using HTML CSS & Javascript
<!DOCTYPE html>
<!-- Created By techno-ahmad -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Transparent Login Form UI</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>
<body>
<div class="bg-img">
<div class="content">
<header>Login Form</header>
<form action="#">
<div class="field">
<span class="fa fa-user"></span>
<input type="text" required placeholder="Email or Phone">
</div>
<div class="field space">
<span class="fa fa-lock"></span>
<input type="password" class="pass-key" required placeholder="Password">
<span class="show">SHOW</span>
</div>
<div class="pass">
<a href="#">Forgot Password?</a>
</div>
<div class="field">
<input type="submit" value="LOGIN">
</div>
</form>
<div class="login">
Or login with</div>
<div class="links">
<div class="facebook">
<i class="fab fa-facebook-f"><span>Facebook</span></i>
</div>
<div class="instagram">
<i class="fab fa-instagram"><span>Instagram</span></i>
</div>
</div>
<div class="signup">
Don't have account?
<a href="#">Signup Now</a>
</div>
</div>
</div>
<script>
const pass_field = document.querySelector('.pass-key');
const showBtn = document.querySelector('.show');
showBtn.addEventListener('click', function(){
if(pass_field.type === "password"){
pass_field.type = "text";
showBtn.textContent = "HIDE";
showBtn.style.color = "#3498db";
}else{
pass_field.type = "password";
showBtn.textContent = "SHOW";
showBtn.style.color = "#222";
}
});
</script>
</body>
</html>
CSS
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Poppins:400,500&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
user-select: none;
}
.bg-img{
background: url('bg.jpg');
height: 100vh;
background-size: cover;
background-position: center;
}
.bg-img:after{
position: absolute;
content: '';
top: 0;
left: 0;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.7);
}
.content{
position: absolute;
top: 50%;
left: 50%;
z-index: 999;
text-align: center;
padding: 60px 32px;
width: 370px;
transform: translate(-50%,-50%);
background: rgba(255,255,255,0.04);
box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75);
}
.content header{
color: white;
font-size: 33px;
font-weight: 600;
margin: 0 0 35px 0;
font-family: 'Montserrat',sans-serif;
}
.field{
position: relative;
height: 45px;
width: 100%;
display: flex;
background: rgba(255,255,255,0.94);
}
.field span{
color: #222;
width: 40px;
line-height: 45px;
}
.field input{
height: 100%;
width: 100%;
background: transparent;
border: none;
outline: none;
color: #222;
font-size: 16px;
font-family: 'Poppins',sans-serif;
}
.space{
margin-top: 16px;
}
.show{
position: absolute;
right: 13px;
font-size: 13px;
font-weight: 700;
color: #222;
display: none;
cursor: pointer;
font-family: 'Montserrat',sans-serif;
}
.pass-key:valid ~ .show{
display: block;
}
.pass{
text-align: left;
margin: 10px 0;
}
.pass a{
color: white;
text-decoration: none;
font-family: 'Poppins',sans-serif;
}
.pass:hover a{
text-decoration: underline;
}
.field input[type="submit"]{
background: #3498db;
border: 1px solid #2691d9;
color: white;
font-size: 18px;
letter-spacing: 1px;
font-weight: 600;
cursor: pointer;
font-family: 'Montserrat',sans-serif;
}
.field input[type="submit"]:hover{
background: #2691d9;
}
.login{
color: white;
margin: 20px 0;
font-family: 'Poppins',sans-serif;
}
.links{
display: flex;
cursor: pointer;
color: white;
margin: 0 0 20px 0;
}
.facebook,.instagram{
width: 100%;
height: 45px;
line-height: 45px;
margin-left: 10px;
}
.facebook{
margin-left: 0;
background: #4267B2;
border: 1px solid #3e61a8;
}
.instagram{
background: #E1306C;
border: 1px solid #df2060;
}
.facebook:hover{
background: #3e61a8;
}
.instagram:hover{
background: #df2060;
}
.links i{
font-size: 17px;
}
i span{
margin-left: 8px;
font-weight: 500;
letter-spacing: 1px;
font-size: 16px;
font-family: 'Poppins',sans-serif;
}
.signup{
font-size: 15px;
color: white;
font-family: 'Poppins',sans-serif;
}
.signup a{
color: #3498db;
text-decoration: none;
}
.signup a:hover{
text-decoration: underline;
}
Comments
Post a Comment
Dont abuse .