beingtopper.jkp@gmail.com
+91-8700702530
Free Demo

Being Topper

  • About Us
  • Knowledge Base
  • Modules
  • Branches
    • Ajmer
    • Tilak Nagar
    • Noida
    • Chandigarh
    • Mumbai
  • Contact Us

Being Topper

  • About Us
  • Knowledge Base
  • Modules
  • Branches
    • Ajmer
    • Tilak Nagar
    • Noida
    • Chandigarh
    • Mumbai
  • Contact Us
  • About Us
  • Knowledge Base
  • Modules
  • Branches
    • Ajmer
    • Tilak Nagar
    • Noida
    • Chandigarh
    • Mumbai
  • Contact Us

Being Topper

  • About Us
  • Knowledge Base
  • Modules
  • Branches
    • Ajmer
    • Tilak Nagar
    • Noida
    • Chandigarh
    • Mumbai
  • Contact Us
Uncategorized

Custom Login form

Being Topper 01/07/2017 0 Comments

Nowadays, almost every website have log in forms and they have become a necessary part.

Without further ado, let’s start now

custom login form

I have created a attractive log in form using CSS.
The MARKUP

<div id="login" >
<input placeholder="Username" type="text" class="name">
<input placeholder="Password"  type="password" class="password">
<input type="submit">
</div>

We have a container with two text fields and a submit button, pretty simple.

The CSS

We will first give some style to the container itself.

#login
{
background:#FFFFFF;
margin:auto;
margin-top:100px;
padding-top:2%;
padding-bottom:2%;
padding-left:2%;
padding-right:2%;
width:31%;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
font-family:Berlin Sans FB Demi;
background: rgb(247, 247, 247);
-webkit-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
-moz-box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
box-shadow: 0pt 2px 5px rgba(105, 108, 109,  0.7),    0px 0px 8px 5px rgba(208, 223, 226, 0.4) inset;
}

We have set the margin to auto to align the container in center.

Now, give some style to the text fields

#login input.name,#login input.password
{
font-size:18px;
width:100%;
height:40px;
font-family: "Helvetica Neue", Arial, sans-serif;
margin-bottom:1%;
padding-left:45px;
border:none;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
-webkit-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
-moz-box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
box-shadow: 0px 1px 4px 0px rgba(168, 168, 168, 0.6) inset;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
transition: all 0.2s linear;
}

To set the icons

#login input.name
{
background: #fff url(assets/user.png) 5px 4px no-repeat;
}
#login input.password
{
background: #fff url(assets/password.png) 5px 4px no-repeat;
}

We make sure to prevent overlapping of icons and text by giving some decent padding.

Before going further, let’s work on focus state, to make sure that on focusing on text fields the icon didn’t disappear

#login input.name:focus
{
background:url(assets/user.png) 5px 4px no-repeat rgb(238, 236, 240);
border:none;
}
#login input.password:focus
{
background:url(assets/password.png) 5px 4px no-repeat rgb(238, 236, 240);
border:none;
}

For the placeholders in text fields

::-webkit-input-placeholder
{
color: rgb(190, 188, 188);
font-style: italic;
font-size:16px;
}
input:-moz-placeholder
{
color: rgb(190, 188, 188);
font-style: italic;
font-size:16px;
}

Finally, the submit button

input[type="submit"]
{
font-size:18px;
font-weight:bold;
text-align:center;
border:0;
color:#FFFFFF;
-webkit-border-radius:3px;
-moz-border-radius:3px;
border-radius:3px;
height:40px;
width:100%;
cursor:pointer;
/* double layers in button */
background: linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);
background: -o-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);
background: -moz-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);
background: -webkit-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);
background: -ms-linear-gradient(bottom, rgb(80,102,127) 50%, rgb(87,109,136) 50%, rgb(106,129,155) 100%);
background: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.5, rgb(80,102,127)),
color-stop(0.5, rgb(87,109,136)),
color-stop(1, rgb(106,129,155))
);
}

Download files

Custom Login form Custom Login form using jquery and css
AboutBeing Topper
In Socials:
PrevImage Gallery using CSS3 and jQuery01/07/2017
How to Create New Email Account? Free Email Account01/07/2017Next
Categories
Recent Posts
  • Best Email Marketing Software and Services
  • How to Apply Adsense on YouTube
  • Complete Guide to Writing a Newsletter !
  • Benefits of Creating Email List for small Businesses | Digital Marketing
  • Create Account or Get Email Alerts When New Employees Join a Company

Copyright © 2021 Being Topper ® . All Rights Reserved