Flat UI Login Form With Horizontal Scroll

flat-ui-login-form-featured
272 Flares 272 Flares ×

Flat UI Login Form With Horizontal Transition

Today we bring you a beautiful yet simple Flat UI Login form with some nice horizontal transition or say scrolling effect. This tutorial includes a flat UI design of Login form, registration form and a forget password form. Which switch with horizontal transition effect.

Features

  • Simple, minimal and flat design.
  • Form switching with beautiful Horizontal transition effect using jQuery.
  • Social buttons with icons for login and register using facebook, twitter and Google+.
  • Simple markup and styling.

So let’s start our tutorial with some markup of our Flat UI login form.

Markup

The markup for this example is very simple for this example.


<body>
<!--Login Section-->
<div class="section" id="section1">
<div class="login-form">
	<h1>Login</h1>
    <p>You already have an account? Great! Login here.</p>
    <div>
    	<form class="form-wrapper-01">
              <input id="" class="inputbox email" type="text" placeholder="Email id" />
              <input id="" class="inputbox password" type="password" placeholder="Password" />
            <p><a href="#" class="button">Login <i class="icon-paper-plane"></i></a></p>
        </form>
              <p>Forget password? It's ok. <a class="scroll" href="#section3">Recover here &raquo;</a></p>
    </div>
    <hr />
   	  <p>Or you can Login with one of the following</p>
    <div class="social">
        <a href="#" class="facebook"><i class="icon-facebook"></i></a>
        <a href="#" class="twitter"><i class="icon-twitter"></i></a>
        <a href="#" class="google"><i class="icon-gplus"></i></a>
    </div>
    <p>Don't have an account? <a class="scroll" href="#section2">Register Now &raquo;</a></p>
</div>
</div>
<!--END: Login Section-->

<!--Signup Section-->
<div class="section" id="section2">
<div class="signup-form">
	<h1>Sign Up in Seconds!</h1>
    <p>Signup using your Email address</p>
    <div>
    	<form class="form-wrapper-01">
              <input id="" class="inputbox name" type="text" placeholder="Your Name" />
              <input id="" class="inputbox email" type="text" placeholder="Email id" />
              <input id="" class="inputbox password" type="password" placeholder="Password" />
              <input id="" class="inputbox password" type="password" placeholder="Confirm Password" />
              <p><a href="#" class="button">Create my Account <i class="icon-paper-plane"></i></a></p>
              <!--<input id="" type="button" class="button" value="Sign up" />-->
        </form>
    </div>
    <hr />
   	  <p>Or you can Signup with one of the following</p>
    <div class="social">
        <a href="#" class="facebook"><i class="icon-facebook"></i><span>Facebook</span></a>
        <a href="#" class="twitter"><i class="icon-twitter"></i><span>Twitter</span></a>
        <a href="#" class="google"><i class="icon-gplus"></i><span>Google</span></a>
    </div>
    <p><a class="scroll" href="#section1">&laquo; Login here</a></p>
</div>
</div>
<!--END: Signup Section-->

<!--Forget Password Section-->
<div class="section" id="section3">
<div class="login-form">
	<h1>Lost password?</h1>
    <p>Ohk, don't panic. You can recover it here.</p>
    <div>
    	<form class="form-wrapper-01">
              <input id="" class="inputbox email" type="text" placeholder="Email id" />
            <p><a href="#" class="button">Send me <i class="icon-paper-plane"></i></a></p>
        </form>
    </div>
    <hr />
   	  <p>You remember your Password? Brilliant!</p>
    <p><a class="scroll" href="#section1">&laquo; Login here</a></p>
</div>
</div>
<!--END: Forget Password Section-->

This is the complete markup for our form. Which includes login, registration and forget password form. And now the CSS

CSS

CSS actually plays an very important role in this example as we want a our body width more than usual. So we need to write the CSS cautiously. However, the most important role is of <body> tag.


body {
margin:0;
padding:0;
background:#2ca1cc;
font-family: "Open Sans",sans-serif;
font-size:14px;
color:#999;
vertical-align:baseline;
width:4800px;
position:absolute;
top:0px;
left:0px;
bottom:0px;
overflow-x:hidden; /*This will hide the Horizontal Scroll bar*/
}

Now we will style .login-form, .signup-form and .forgot-pwd classes to style our three forms. Also the .section class will provide the width which will contain each form and keep the other two away from the viewport.


.section {
	margin:0px;
	bottom:0px;
	width:1600px;
	float:left;
	height:100%;
	text-align:center;
}
.login-form, .signup-form, .forgot-pwd {
	background:#fff;
	border-radius: 4px;
	padding:30px;
	text-align:center;
	float:left;
	margin:5em 40em;
}
.login-form, .forgot-pwd {
	width:350px;
}
.signup-form {
	width:600px;
}

CSS for Inputs


.form-wrapper-01 {
	margin: 0;
	padding: 10px 0;
}
.form-wrapper-01 .inputbox {
	border: 1px solid #eaedf2;
	border-radius:3px;
	height: 20px;
	padding: 10px 0 10px 32px;
	width: 44%;
	outline:none;
	margin-bottom:10px;
	font-family: inherit;
}
.login-form .form-wrapper-01 .inputbox {
	width:88%;
}
.form-wrapper-01 .name {
	background:#eaedf2 url(img/user.png) 10px 13px no-repeat;
}
.form-wrapper-01 .email {
	background:#eaedf2 url(img/email.png) 10px 15px no-repeat;
}
.form-wrapper-01 .password {
	background:#eaedf2 url(img/password.png) 10px 10px no-repeat;
}
.form-wrapper-01 a.button {
	background: none repeat scroll 0 0 #14B9D5;
	border: none;
	border-radius: 4px 4px 4px 4px;
	color: #FFFFFF;
	cursor: pointer;
	font-family: inherit;
	font-size: 15px;
	font-weight: 700;
	padding: 10px 20px;
}
.form-wrapper-01 .button:hover {
	background:#0e778a;
}
.form-wrapper-01 a.button > i {
	font-size:20px;
}

Style for Social Buttons


/*Social Button Styling*/
.social {
	margin: 40px 0 10px;
}
.social a {
	color:#fff;
	text-decoration:none;
	font-weight:bold;
	border-radius: 4px 4px 4px 4px;
	padding:20px 0;
}
.social a.facebook {
	background:#3b5998;
}
.social a.facebook:hover {
	background:#37528c;
}
.social .twitter {
	background:#1daee3;
	margin: 0 26px;
}
.social .twitter:hover {
	background:#1ca4d6;
}
.social .google {
	background:#d34836;
}
.social .google:hover {
	background:#c74534;
}
.social .facebook > i, .social .twitter > i, .social .google > i {
	border-radius: 4px 0 0 4px;
	bottom: 3px;
	font-size: 38px;
	padding: 10px 14px;
	position: relative;
	vertical-align: middle;
	clear: both;
}
.social .facebook > span, .social .twitter > span, .social .google > span {
	font-size: 18px;
	letter-spacing: 0.06em;
	padding:24px 20px 24px 0;
}

In this way we have styled our Flat UI login form. Following are some static previews,

Preview

Login Form

flat-ui-login-form-preview-01

Signup / Register Form

flat-ui-login-form-preview-02

Forget Password Form

flat-ui-login-form-preview-03

Now let’s give some horizontal transition effect when these forms switch from one to another. For that we will be using some simple jQuery. You can learn more about this horizontal scrolling effect here.

<!--Script for Horizontal Scrolling-->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>
<script type="text/javascript">
            $(function() {
                $('a.scroll').bind('click',function(event){
                    var $anchor = $(this);
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 500,'easeInOutExpo');
                     /* Uncomment this for another scrolling effect */
					 /*
                    $('html, body').stop().animate({
                        scrollLeft: $($anchor.attr('href')).offset().left
                    }, 1000);*/
                    event.preventDefault();
                });
            });
        </script>

In this way we have created a beautiful flat UI login form with horizontal transition switching effect. Remember on thing that we have used overflow:hidden in the body class to hide the horizontal scroll bar. That is a tweak we have done, so that user should not notice and access the register and forget password form using scroll bar.

272 Flares Twitter 14 Facebook 13 Google+ 6 LinkedIn 223 Pin It Share 16 272 Flares ×
author avatar

Akash is a freelance web designer and developer and also the founder of Dzyngiri.com You can get connected with him on Twitter and Facebook

Connect with us

7 Comments

  1. Hey! Well, I’m creating a website, and I love this design. It’s simple, elegant, and precise. The user can see exactly what to do. I was wondering if you guys have any rules against simply copying and pasting it?
    Thanks!

Leave a Reply

(*) Required, Your email will not be published