Skip to content

Tab Style Login and Signup with CSS

  • by
Tab Style Login and Signup with CSS

This post is very basic level CSS implementation. I want to explain how to design tab style login and registration panel with CSS, HTML and Jquery. Tab system help you to save page space.

Tab Style Login and Signup with CSS
Tab Style Login and Signup with CSS

Tab Style Login and Signup with CSS

Step 1

Layout divided into three horizontal parts are Container, Tabbox and Panel. Here Container is the parent div.

HTML Code

<div id="container">
<div id="tabbox"></div>
<div id="panel"></div>
</div>

CSS Code

#container
{
width:350px
}
#tabbox
{
height:40px
}
#panel
{
background-color:#FFF;
height:300px;
}

Step 2

Tabbox div divided into two vertical parts called tabs are Login and Signup

HTML Code

<div id="tabbox">
<a href="#" id="signup" class="tab signup">Signup</a>
<a href="#" id="login" class="tab select">Login</a&gt;
</div>

CSS Code
Contains CSS3 code for round corners. Here signup class for margin left 8px it allots gap between login and signup tabs.

.tab
{
background: #dedede;display: block;height: 40px;
line-height: 40px;text-align: center;
width: 80px;float: right;font-weight: bold;
-webkit-border-top-left-radius: 4px;
-webkit-border-top-right-radius: 4px;
-moz-border-radius: 4px 4px 0px 0px;
}
a
{
color: #000;
margin: 0;
padding: 0;
text-decoration: none;
}
.signup
{
margin-left:8px;
}
.select
{
background-color:#FFF;
}

Step 3

Now Panel div divided into two horizontal parts are Loginbox and Signupbox. By default Signupbox display none.

HTML Code

<div id="panel">
      <div id="loginbox">
        <h1>Login Form</h1>
        <label>USER NAME</label>
        <input type="text" name="uname" value="" placeholder="Enter User Name" class="textcl"/>
        <br/>
        <br/>
        <label>PASSWORD</label>
        <input type="password" name="password" value="" placeholder="Enter Password" class="textcl"/>
        <br/>
        <br/>
        <input type="submit" name="submit" value="Login" class="btn-primary orange"/>
      </div>
      <div id="signupbox">
        <h1>Singup Form</h1>
        <label>USER NAME</label>
        <input type="text" name="uname" value="" placeholder="Enter User Name" class="textcl"/>
        <br/>
        <br/>
        <label>PASSWORD</label>
        <input type="password" name="password" value="" placeholder="Enter Password" class="textcl"/>
        <br/>
        <br/>
        <label>EMAIL ID&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <input type="text" name="email" value="" placeholder="Enter Email id" class="textcl"/>
        <br/>
        <br/>
        <input type="submit" name="submit" value="Singup" class="btn-primary orange"/>
      </div>
    </div>

CSS Code

#loginbox {
  height:300px;
  padding:10px;
}
#signupbox {
  height:300px;
  padding:10px;
  display:none;
}
.textcl {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  border-radius:2px;
  padding:5px;
}
label {
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 5px;
}
.btn-primary.orange {
  background-color:#e79e05;
  border:1px solid #e79e05;
  padding:5px;
  color:#FFFFFF;
  font-weight:bold;
}

Step 4

Handling DOM objects with Javscript .

Javascript Code
$(“.tab”).click(function(){})– tab is the class name of anchor tag. Using $(this).attr(‘id’) – calling the anchor tag ID value.

<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{

$(".tab").click(function()
{
var X=$(this).attr('id');

if(X=='signup')
{
$("#login").removeClass('select');
$("#signup").addClass('select');
$("#loginbox").slideUp();
$("#signupbox").slideDown();
}
else
{
$("#signup").removeClass('select');
$("#login").addClass('select');
$("#signupbox").slideUp();
$("#loginbox").slideDown();
}

});

});
</script>

Full Code :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>login and signup</title>
<script type="text/javascript" src="http://ajax.googleapis.com/
ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="application/javascript">
$(document).ready(function()
{
  
$(".tab").click(function()
{
var X=$(this).attr('id');
 
if(X=='signup')
{
$("#login").removeClass('select');
$("#signup").addClass('select');
$("#loginbox").slideUp();
$("#signupbox").slideDown();
}
else
{
$("#signup").removeClass('select');
$("#login").addClass('select');
$("#signupbox").slideUp();
$("#loginbox").slideDown();
}
 
});

});
</script>
<style>
body {
  font-family:Arial, Helvetica, sans-serif;
  font-size:12px;
  background-color:#333;
}
#container {
  width:350px
}
#tabbox {
  height:40px
}
#panel {
  background-color:#FFF;
  height:300px;
}
.tab {
  background: #dedede;
  display: block;
  height: 40px;
  line-height: 40px;
  text-align: center;
  width: 80px;
  float: right;
  font-weight: bold;
  -webkit-border-top-left-radius: 4px;
  -webkit-border-top-right-radius: 4px;
  -moz-border-radius: 4px 4px 0px 0px;
}
a {
  color: #000;
  margin: 0;
  padding: 0;
  text-decoration: none;
}
.signup {
  margin-left:8px;
}
.select {
  background-color:#FFF;
}
#loginbox {
  height:300px;
  padding:10px;
}
#signupbox {
  height:300px;
  padding:10px;
  display:none;
}
.textcl {
  font-family:Verdana, Arial, Helvetica, sans-serif;
  font-size:12px;
  border-radius:2px;
  padding:5px;
}
label {
  font-size: 14px;
  font-weight: 500;
  padding-bottom: 5px;
}
.btn-primary.orange {
  background-color:#e79e05;
  border:1px solid #e79e05;
  padding:5px;
  color:#FFFFFF;
  font-weight:bold;
}
</style>
</head>
<body>
<a href='https://quickmysupport.com' style='color:#fff'>https://quickmysupport.com</a>
<div style="margin:40px">
  <div id="container">
    <div id="tabbox"> <a href="#" id="signup" class="tab signup">Signup</a> <a href="#" id="login" class="tab select">Login</a> </div>
    <div id="panel">
      <div id="loginbox">
        <h1>Login Form</h1>
        <label>USER NAME</label>
        <input type="text" name="uname" value="" placeholder="Enter User Name" class="textcl"/>
        <br/>
        <br/>
        <label>PASSWORD</label>
        <input type="password" name="password" value="" placeholder="Enter Password" class="textcl"/>
        <br/>
        <br/>
        <input type="submit" name="submit" value="Login" class="btn-primary orange"/>
      </div>
      <div id="signupbox">
        <h1>Singup Form</h1>
        <label>USER NAME</label>
        <input type="text" name="uname" value="" placeholder="Enter User Name" class="textcl"/>
        <br/>
        <br/>
        <label>PASSWORD</label>
        <input type="password" name="password" value="" placeholder="Enter Password" class="textcl"/>
        <br/>
        <br/>
        <label>EMAIL ID&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
        <input type="text" name="email" value="" placeholder="Enter Email id" class="textcl"/>
        <br/>
        <br/>
        <input type="submit" name="submit" value="Singup" class="btn-primary orange"/>
      </div>
    </div>
  </div>
</div>
</body>
</html>

If you enjoyed this tutorial and learned something from it, please consider sharing it with our friends and followers! Also like to my facebook page to get more awesome tutorial each week!

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *