fbpx

CSS3 Login Form Styling

Inspired by the concept design of the folks over at invisionapp.com I decided to animate a login form using CSS3. It looks great for mobile devices apps or just websites.

It is a CSS3 Login form – animated! with step by step instructions.

You can look at the code over at jsfiddle.net, and you can use it however you like, as long as it is for non-commercial purposes.

That’s it! I hope you find this useful.

HTML code:

<div class=”loginBox”>

<form name=”form1″ action=”do_login.php” method=”post”>
<img src=”http://www.niandrei.com/tutorial/css3/ep1/logo.png” style=”width:200px; height:200px” /><br><br><br>

<div class=”usernameMask”>&nbsp;</div>
<input type=”text” size=”30″ tabindex=”1″ id=”fa”><br>

<div class=”passwordMask”>&nbsp;</div>
<input type=”password” size=”30″ tabindex=”2″ id=”fb”><br>
<div style=”text-align:right;”>
<button type=”submit” class=”loginBtn”>Login</button>
</div>
</form>

</div>

 

CSS code:

body
{
background-color:#13A1CE;
}

@-webkit-keyframes fadein
{
0% { opacity: 0; }
10% { opacity: 0; }
84% { opacity: 0; }
100% { opacity: 1; }
}

@-webkit-keyframes fadeout
{
0% { opacity: 0; }
10% { opacity: 0; }
84% { opacity: 0; }
100% { opacity: 0.5; }
}

@-webkit-keyframes imgZoomOut
{
from { max-width: 400px; max-height:400px; }
to { max-width: 128px; max-height:128px; }
}

.loginBox
{
background-color:transparent;
padding: 20px 20px 20px 20px;
margin-top: 20px;
border-style: none;
text-align:center;
color:#ffffff;
max-width:280px;
margin-left:auto;
margin-right:auto;
}

.loginBox img
{
margin-top:0px;
margin-bottom:20px;
max-width:128px;
max-height:128px;
-webkit-animation: imgZoomOut 2s;

}

.usernameMask, .passwordMask
{
border-radius: 34px;
-moz-border-radius: 34px;
-webkit-border-radius: 34px;
padding:0px 0px 0px 0px;
opacity:0.5;
width:100%;
height:50px;
background-color:#5EB4E6;
float:left;
position:relative;
z-index:1;
-webkit-animation: fadeout 1s;
}

.usernameMask
{
background-image:url(“http://www.niandrei.com/tutorial/css3/ep1/username.png”);
background-position:left;
background-repeat:no-repeat;
}

.passwordMask
{
background-image:url(“http://www.niandrei.com/tutorial/css3/ep1/password.png”);
background-position:left;
background-repeat:no-repeat;
-webkit-animation: fadeout 1.2s;
}

.loginBox input[type=”text”], input[type=”password”], input[type=”password”]:focus
{
background-color:transparent;
padding:15px 0px 15px 0px;
margin: 0 0 5px 60px;
margin-top:-44px;
float:left;
width:70%;
position:relative;
z-index:2;
margin-right:20%;
border:none;
box-shadow:none;
color:#ffffff;
-webkit-animation: fadein 1s;
}

input[type=”password”]
{
-webkit-animation: fadein 1.2s !important;
}

.loginBtn
{
cursor: pointer;
margin: 20px 0px 0px 0px;
border: none;
padding: 15px 0px 15px 0px;
text-align: center;
text-decoration: none;
background-color: #00CEBB;
color: #ffffff;
width:100%;
border-radius: 34px;
-moz-border-radius: 34px;
-webkit-border-radius: 34px;
-webkit-animation: fadein 1.4s;
transition: background-color 300ms ease-out;
}

.loginBtn:hover
{
background-color: #000000;
color: #ffffff;
}

 

And if you want more CSS, check out my tutorial for a simple toggle button.

Share this info with your audience:

Leave a reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.