Beautiful login screen with animation using CSS, HTML and jQuery. This trendy User Interface login screen is easy to integrate with any website for login and logout. Demo and Download the zip (*.zip).
Trendy User Interface Login screen code below
HTML Snippet
<form class="login"> <div class="form-group"> <input type="text" class="user" name="user" placeholder="type your user name"> <input type="password" class="pwd" name="pwd" placeholder="type your password"> </div> <span class="links"> <a href="#">signup</a> <a href="#">forgot password ?</a> </span> <br/> <input type="button" class="btn" value="login"> </form>
CSS Snippet
body { font-family: 'Open Sans', sans-serif; background-color: #cddc39; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .login { position: relative; background: #fbfbfb; display: block; width: 500px; height: 70px; margin: 10% auto; overflow: hidden; -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -ms-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2); -ms-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2); -o-box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 8px rgba(0, 0, 0, 0.2); -webkit-transform: translateY(-50px); -moz-transform: translateY(-50px); -ms-transform: translateY(-50px); -o-transform: translateY(-50px); transform: translateY(-50px); } .form-group { position: relative; top: 90%; left: 8%; -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -ms-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 1s; transition-delay: 1s; } .user, .pwd { position: absolute; display: block; width: 80%; height: 60px; background: #fff; font-size: 10pt; text-transform: capitalize; padding-left: 20px; color: rgba(0, 0, 0, 0.1); -webkit-box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.2); -moz-box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.2); -ms-box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.2); -o-box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.2); box-shadow: 1px 1px 20px rgba(0, 0, 0, 0.2); border: none; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -ms-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); } .user:focus, .user:active:focus, .pwd:focus, .pwd:active:focus { outline: none; padding-left: 30px; } .user { margin-bottom: 10%; z-index: 2; -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .pwd { margin-top: 10%; z-index: 1; background: rgba(0, 0, 0, 0.1); -webkit-transition: 0.5s; -moz-transition: 0.5s; -ms-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; } .links { position: absolute; top: 80%; left: 10%; margin: 0 auto; -webkit-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -moz-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -ms-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -o-transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); transition: all 600ms cubic-bezier(0.68, -0.55, 0.265, 1.55); -webkit-transition-delay: 1.2s; transition-delay: 1.2s; } .links a { text-decoration: none; display: block; float: left; width: 200px; height: 40px; text-align: left; color: #3d5059; font-size: 10pt; font-weight: bolder; text-transform: capitalize; } .links a:last-child { text-align: right; } .btn { position: absolute; bottom: 0; width: 100%; height: 70px; border: none; background: #03a9f4; font-family: 'Open Sans', sans-serif; text-align: center; font-size: 18pt; text-transform: capitalize; color: #fff; z-index: 3; -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-transition: 0.3s; -moz-transition: 0.3s; -ms-transition: 0.3s; -o-transition: 0.3s; transition: 0.3s; } .btn:hover, .btn:focus, .btn:active:focus { background: #e91e63; cursor: pointer; outline: none; letter-spacing: 5px; }
jQuery Snippet
$(document).ready(function() { $('form').find('.btn').on('click', function() { $(this).parent().css({ 'height': '350px', 'transform': 'translateY(50px)' }); $(this).siblings('.form-group').css({ 'top': '20%' }); $(this).siblings('.links').css({ 'top': '65%' }); }); $('.pwd').on('focusout', function() { $(this).siblings('.user').css({ 'z-index': '1', 'background': 'rgba(0,0,0,.1)' }); $(this).css({ 'z-index': '2', 'background': '#fff' }); }); $('.user').on('focusout', function() { $(this).siblings('.pwd').css({ 'z-index': '1', 'background': 'rgba(0,0,0,.1)' }); $(this).css({ 'z-index': '2', 'background': '#fff' }); }); })
Find the demo below
See the Pen Trendy Login screen User Interface by Chouaib Blgn (@elmanifico45) on CodePen.
Discussion about this post