<div class="container">
<div class="row">
<form class="login_form">
<h2 class="form_title">Login Form</h2>
<div class="form-group">
<input class="form-control" type="email" placeholder="* Email address" name="User_email" required style="animation:show 0.8s cubic-bezier(0.18, 0.89, 0.32, 1.28);"/>
</div>
<div class="form-group">
<input class="form-control" type="password" placeholder="* Password" name="password" required style="animation:show 0.9s cubic-bezier(0.18, 0.89, 0.32, 1.28);"/>
</div>
<div class="form-group">
<div class="checkbox" style="animationshow 0.5s ease-in;">
<label><input type="checkbox" style="animation:show 1s cubic-bezier(0.18, 0.89, 0.32, 1.28);"> Remember me</label>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-default" style="animation:show 1.2s cubic-bezier(0.18, 0.89, 0.32, 1.28);">Log in</button>
<!--<button type="submit" class="btn btn-default">Sign up</button> -->
</div>
</form>
</div>
</div>
.row {
padding-top:50px;
}
.login_form {
width:80%;
max-width:350px;
display:block;
margin:0 auto;
background:#fd9906;
border-bottom:10px solid brown;
padding:30px;
position:relative;
}
.login_form:before,.login_form:after {
position:absolute;
content:'';
top:8px;
width:50px;
height:102%;
background:brown;
border-radius:0px;
z-index:-1;
}
.login_form:before { transform:skew(3deg);
left:-10px;
}
.login_form:after {
transform:skew(-3deg);
right:-10px;
}
.form_title {
margin:5px 0 40px 0;
text-align:center;
color:yellow;
text-shadow:1px 1px 1px #888;
}
.form-control,.btn {
margin:0 auto;
border-radius:0;
border:0;
transform-origin:right top;
box-shadow:0.5px 1.5px 1px #666;
}
.btn {
width:100%;
background:#fff;
cursor:pointer;
}
@keyframes show {
from{
opacity:0;
border-radius:100px;
transform:translateY(50px);
}
to{
opacity:1;
border-radius:0;
transform:translateY(0px);
}
}
This Pen doesn't use any external JavaScript resources.