Example :)
Login
Source Code :)
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Animated Login Form Using HTML & CSS | Pure Coding</title>
</head>
<body>
<div class="container">
<div class="social-media">
<h4>Login with social media</h4>
<div class="icons">
<a href="#"><i class="fa fa-facebook-f"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-google-plus"></i></a>
</div>
</div>
<h2>Login</h2>
<form>
<div class="input-box">
<input type="text" required>
<span>Username</span>
</div>
<div class="input-box">
<input type="password" required>
<span>Password</span>
</div>
<div class="input-box">
<button>Sign In</button>
</div>
</form>
</div>
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Roboto';
}
body {
width: 100%;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
padding: 0 20px;
background: #182C61;
}
.container {
background: #FFF;
padding: 2rem;
border-radius: 5px;
border-top: 4px solid #6c5ce7;
width: 500px;
}
.container .social-media {
margin-bottom: 45px;
}
.container .social-media h4 {
color: #6c5ce7;
text-align: center;
font-size: 1rem;
text-transform: capitalize;
margin-bottom: 20px;
}
.container .social-media .icons {
width: 100%;
display: flex;
justify-content: center;
}
.container .social-media .icons a {
color: #FFF;
background: #6c5ce7;
margin: 0 20px;
width: 50px;
height: 50px;
position: relative;
font-size: 1.5rem;
border-radius: 50%;
border: 1px solid #6c5ce7;
transition: .3s;
}
.container .social-media .icons a:hover {
background: transparent;
color: #6c5ce7;
}
.container .social-media .icons a i {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.container h2 {
color: #6c5ce7;
margin-bottom: 40px;
font-size: 2rem;
text-align: center;
}
.container .input-box {
height: 40px;
margin-bottom: 40px;
width: 100%;
position: relative;
border-bottom: 2px solid #6c5ce7;
}
.container .input-box:last-child {
border: none;
}
.container .input-box input {
background: transparent;
border: none;
position: absolute;
width: 100%;
height: 100%;
}
.container .input-box span {
position: absolute;
top: 50%;
transform: translateY(-50%);
pointer-events: none;
color: #6c5ce7;
transition: .3s;
}
.container .input-box input:focus ~ span, .container .input-box input:valid ~ span {
transform: translateY(-40px);
font-size: 90%;
}
.container .input-box button {
padding: .7rem 2rem;
border: none;
background: transparent;
border: 1px solid;
cursor: pointer;
color: #6c5ce7;
width: 100%;
border-radius: 30px;
font-size: 1rem;
text-transform: uppercase;
transition: .3s;
}
.container .input-box button:hover {
background: #6c5ce7;
color: #FFF;
}
