Create Animated Login Form Using Only CSS & HTML
In this tutorial we will create nice animated login form using only css and html, no javascript required. To see how the animation will look like scroll to the bottom of the article and check the video. A nice login page will create enagement for your users because they are used to the default login page with 2 inputs and few buttons. Anyway, you can implement this type of animation on any page you want because is very easy to implement.
Animated Login Form
First step is to create the HTML structure for the page. It looks like the following:
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="container">
<div class="top"></div>
<div class="bottom"></div>
<div class="center">
<h2>Please sign in</h2>
<form>
<input type="email" placeholder="email">
<input type="password" placeholder="password">
<button>Sign in</button>
</form>
</div>
</div>
</body>
</html>
The two empty divs are used only to create the animation elements. And the div.center will keep all the information we have in our page.
The last part is to add the css code:
*{
margin:0;
padding:0;
box-sizing: border-box;
}
body{
min-height:100vh;
font-family: 'Raleway';
}
.container{
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
.top:before,
.top:after,
.bottom:before,
.bottom:after{
content:"";
display: block;
position: absolute;
width: 200vmax;
height: 200vmax;
top:50%;
left:50%;
margin-top:-100vmax;
transform-origin: 0 50%;
transition:all 0.5s cubic-bezier(0.445,0.05,0,1);
z-index:10;
opacity:0.65;
transition-delay:0.2s;
}
.top:before{
transform:rotate(45deg);
background:#e46569;
}
.top:after{
transform:rotate(135deg);
background:#60b8d4;
}
.bottom:before{
transform:rotate(-45deg);
background:#60b8d4;
}
.bottom:after{
transform:rotate(-135deg);
background:#3745b5;
}
.center{
position:absolute;
width: 400px;
height:400px;
top:50%;
left:50%;
margin-left:-200px;
margin-top:-200px;
display:flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding:30px;
transition: all 0.5s cubic-bezier(0.445,0.05,0,1);
transition-delay:0s;
color:#333;
opacity:0;
}
.center input{
width:100%;
padding:15px;
margin:5px;
border-radius: 1px;
border:1px solid #ccc;
}
.center button{
display:inline-block;
background:#3745b5;
padding:15px 40px;
border-radius: 1px;
color:#fff;
font-size:14px;
border:0 none;
margin:5px;
width:100%;
cursor:pointer;
}
.container:hover .top:before,
.container:hover .top:after,
.container:hover .bottom:before,
.container:hover .bottom:after,
.container:active .top:before,
.container:active .top:after,
.container:active .bottom:before,
.container:active .bottom:after{
margin-left:200px;
transform-origin: -200px 50%;
transition-delay:0s;
}
.container:hover .center,
.container:active .center{
opacity:1;
transition-delay: 0.2s;
}
That's all the code you need to create an animated login form. As I said earlier, there is no need of javascript to achive this effect.