In this article we are going to see create a login form in different look by using Css and jquery. For this we have to use the span tags which make the tag inner style. Create the username and password as span tag inside a another span tag.
using Css give a different style and look
using jquery make a action to fire and design the tag.
link: Login Form output
Please click on the username, password and login button to animate.
Output:
Html
<html>
Css
Jquery:
From this article you can see how we can create a different style of login forms.
using Css give a different style and look
using jquery make a action to fire and design the tag.
link: Login Form output
Please click on the username, password and login button to animate.
Username
Password
Password
Output:
Html
<html>
<head>
<link type="text/css" rel="stylesheet" href="css.css"/>
<link href='http://fonts.googleapis.com/css?family=Roboto:400,300,500' rel='stylesheet' type='text/css'>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
</head>
<body>
<div class="login" id="" >
<span id="slogin">
<span class="spass rpad" id="passd">
<span id="uname" ><span id="actuname">Username </span><input type="text" id="username" placeholder="Enter the username" required />
<span class="spass lpad" id="upad"><span id="pp1"> Password </span>
<input type="password" id="pwd" placeholder="Enter the password" required /></span>
</span>
<span id="pp"> Password </span>
</span> <input id="log" value="login" type="submit" />
</span>
</div>
</body>
</html>
body
{
width: 100%;
height: 100%;
margin: 0 auto;
background-color: #efefef;
margin-top: 50px;
}
#username
{
background:rgb(26, 78, 107);
width:40%;
height:34px;
font-size: medium;
color:white;
padding-left: 15px;
padding-right: 15px;
border-radius:25px;
}
#pwd
{
font-size: medium;
background:rgb(9, 85, 12);
width:40%;
height:34px;
display:none;
padding-left: 15px;
padding-right: 15px;
border-radius:25px;
}
#uname
{
background: rgb(100, 150, 197);
width: 100%;
/* height: 36px; */
padding-left: 10px;
padding-right: 0px;
padding-top: 6px;
border-radius: 25px;
padding-bottom: 8px;
border: black;
font-family: 'Roboto', sans-serif;
font-weight: 400;
color:white;
/*position: relative;
left: -30px;*/
}
#log
{
background-color: #e0514b;
border: 0px;
width: 50px;
height: 30px;
}
.lpad
{
padding-left:10px;
display:none;
}
.rpad
{
padding-right:15px;
}
.spass
{
font-family: 'Roboto',
sans-serif;
font-weight: 300;
position:relative;
background: rgb(48, 194, 48);
width: 100%;
/* height: 36px; */
/*padding-left: 10px;*/
padding-top: 6px;
border-radius: 25px;
padding-bottom: 8px;
border: black;
/*position: relative;
left: -30px;*/
}
#slogin
{
font-family: 'Roboto',
sans-serif;
font-weight: 300;
background: #e0514b;
width: 100%;
/* height: 36px; */
/*padding-left: 27px;*/
padding-right: 15px;
padding-top: 6px;
border-radius: 25px;
padding-bottom: 8px;
border: black;
/*position: relative;
left: -30px;*/
}
#passwor
{
font-family: 'Roboto',
sans-serif;
font-weight: 300;
background:blue;
width:60px;
}
#logbt
{
font-family: 'Roboto',
sans-serif;
font-weight: 300;
background:green;
width:60px;
}
.login
{
width:550px;
position:relative;
left:10%;
top:40%
}
#upad
{
font-family: 'Roboto',
sans-serif;
font-weight: 300;
left:5px;
padding-right: 2px;
}
Jquery:
$(document).ready(function(){
$("#pp").click(function(){
$("#pp").hide();
$("#upad").show(),$(
"#passd" ).removeClass( "rpad" );
$("#username").hide(500), $("#pwd").show(500);
});
$("#actuname").click(function(){
$("#upad").hide(),$(
"#passd" ).addClass( "rpad" );
$("#pp").show();
$("#username").show(500),$("#pwd").hide(500);
});
$("#log").click(function()
{
$("#username").hide(500),$("#pwd").hide(500,function(){
$("#pp").show();
$( "#passd" ).addClass( "rpad" );
$("#upad").hide();
});
});
});
From this article you can see how we can create a different style of login forms.
No comments:
Post a Comment