2/17/13

How to Create Login Form with CSS3 and jQuery - Designmodo

Categories Design Freebies Tutorials Coding Inspiration WordPress Resources Shop

RSS Twitter Facebook Google+ Dribbble 336788 Subscribers & Followers Facebook Twitter Google+
Username Password Login

Lost Password?

Categories Design Freebies Tutorials Coding Inspiration WordPress Resources Shop Search

Follow us RSS Twitter Facebook Google+ Dribbble 336788 Subscribers & Followers Share Facebook Twitter Google+
Username Password Login

Lost Password?

How to Create Login Form with CSS3 and jQuery

Valeriu Timbuc Tutorials March 13, 2012 10 Comments

designmodo.com/login-form-css3-jquery/

1/13

2/17/13

How to Create Login Form with CSS3 and jQuery - Designmodo

PanteneProV
TryPanteneShampoo&ConditionerImprove yourHairHealth&Strength
www.PanteneIndonesia.co.id

Topic: CSS3 & jQuery Difficulty: Intermediate / Advanced Estimated Completion Time: 45 mins In this tutorial we will code the Login Form that you can find in Futurico UI Pro made by Vladimir Kudinov. To create it we will use CSS3 and jQuery.

Step 1 HTML Markup

Lets start creating the HTML markup. Create a form with four inputs (for username, password, checkbox and submit) and wrap the checkbox input and label in a span tag, we will use the span tag to style the checkbox. To finish wrap the form and the title with a div tag and give it the class of login-form.
<i> dv <1LgnFr<h> h>oi om/1 <omato=#> fr cin"" <nu tp=tx"nm=uenm"paeodr"srae> ipt ye"et ae"srae lchle=uenm" <nu tp=pswr"nm=pswr"paeodr"asod> ipt ye"asod ae"asod lchle=pswr" <pn sa> <nu tp=ceko"nm=ceko" ipt ye"hcbx ae"hcbx> <ae fr"hcbx>eebr/ae> lbl o=ceko"rmme<lbl <sa> /pn <nu tp=sbi"vle"o i" ipt ye"umt au=lg n> <fr> /om <dv /i>

designmodo.com/login-form-css3-jquery/

2/13

2/17/13

How to Create Login Form with CSS3 and jQuery - Designmodo

Step 2 General CSS Styles

First we will remove all the margins, paddings, borders, etc. from the elements that we will use.
.oi-om lgnfr, .oi-omh, lgnfr 1 .oi-omsa, lgnfr pn .oi-omipt lgnfr nu, .oi-omlbl{ lgnfr ae mri:0 agn ; pdig 0 adn: ; bre:0 odr ; otie 0 uln: ; }

Then we will style the form container. We will add a relative position, a fixed width and height, background color, rounded corners and some shadows.

.oi-om{ lgnfr psto:rltv; oiin eaie wdh 20x it: 0p; hih:20x egt 0p; pdig 1p 2p 02p; adn: 5x 5x 5x mri-o:1p; agntp 5x cro:dfut usr eal; bcgon-oo:#457 akrudclr 111; -ektbre-ais 5x wbi-odrrdu: p; -o-odrrdu:5x mzbre-ais p; bre-ais 5x odrrdu: p; -ektbxsao:0x1x1x0xrb(5,5,5,.) ist0x1x1x0xrb000; wbi-o-hdw p p p p ga252525 2, ne p p p p g(,,) -o-o-hdw 0x1x1x0xrb(5,5,5,.) ist0x1x1x0xrb000; mzbxsao: p p p p ga252525 2, ne p p p p g(,,) bxsao:0x1x1x0xrb(5,5,5,.) ist0x1x1x0xrb000; o-hdw p p p p ga252525 2, ne p p p p g(,,) }

To create the arrow we will use the :before selector to insert it on the page.
.oi-ombfr { lgnfr:eoe psto:aslt; oiin boue tp -2x o: 1p; lf:1p; et 0x wdh 0x it: p; hih:0x egt p; cnet '; otn: ' bre-otm 1p sld#457 odrbto: 0x oi 111; bre-ih:1p sld#457 odrrgt 0x oi 111; bre-o:1p sldtasaet odrtp 0x oi rnprn; bre-et 1p sldtasaet odrlf: 0x oi rnprn;

designmodo.com/login-form-css3-jquery/

3/13

2/17/13
}

How to Create Login Form with CSS3 and jQuery - Designmodo

For the form title we will add some basic styles (color, font family and size, etc.).
.oi-omh { lgnfr 1 ln-egt 4p; iehih: 0x fn-aiy 'yidPo,sn-ei; otfml: Mra r' assrf fn-ie 2p; otsz: 2x fn-egt nra; otwih: oml clr #444 oo: eee; }

Step 3 General Input Styles

First we will give the basic styles to the inputs.
.oi-omipttp=et, lgnfr nu[yetx] .oi-omipttp=asod, lgnfr nu[yepswr] .oi-omipttp=umt { lgnfr nu[yesbi] ln-egt 1p; iehih: 4x mri:1p 0 agn 0x ; pdig 6x1p; adn: p 5x bre:0 odr ; otie nn; uln: oe fn-aiy Hleia sn-ei; otfml: evtc, assrf fn-ie 1p; otsz: 2x fn-egt bl; otwih: od tx-hdw 0x1x1xrb(5,5,5,.) etsao: p p p ga252525 2; -ektbre-ais 2p; wbi-odrrdu: 6x -o-odrrdu:2p; mzbre-ais 6x bre-ais 2p; odrrdu: 6x -ekttasto:al.5 es-not wbi-rniin l 1s aei-u; -o-rniin al.5 es-not mztasto: l 1s aei-u; --rniin al.5 es-not otasto: l 1s aei-u; tasto:al.5 es-not rniin l 1s aei-u; }

Then we will style the user and password input. We will add a gray background gradient and some shadows. We will also add fixed 170px width and a color for the text.
.oi-omipttp=et, lgnfr nu[yetx] .oi-omipttp=asod, lgnfr nu[yepswr] .s.oi-omsa { j lgnfr pn clr #888 oo: 666; wdh 10x it: 7p; -ektbxsao:ist1x1x1x0xrb(5,5,5,.) wbi-o-hdw ne p p p p ga252525 6; -o-o-hdw ist1x1x1x0xrb(5,5,5,.) mzbxsao: ne p p p p ga252525 6; bxsao:ist1x1x1x0xrb(5,5,5,.) o-hdw ne p p p p ga252525 6; bcgon:#888 akrud 999; bcgon:-o-iergain(o, #fff0,#88810) akrud mzlna-rdettp fff % 999 0%; bcgon:-ektgain(ier lf tp lf bto,clrso(%#fff,clrso(0%#888) akrud wbi-rdetlna, et o, et otm oo-tp0,fff) oo-tp10,999); bcgon:-ektlna-rdettp #fff0,999 10) akrud wbi-iergain(o, fff %#888 0%; bcgon:--iergain(o, #fff0,999 10) akrud olna-rdettp fff %#888 0%; bcgon:-slna-rdettp #fff0,999 10) akrud m-iergain(o, fff %#888 0%; bcgon:lna-rdettp #fff0,999 10) akrud iergain(o, fff %#888 0%; }

designmodo.com/login-form-css3-jquery/

4/13

2/17/13

How to Create Login Form with CSS3 and jQuery - Designmodo

For the hover state we will only change the shadows of the inputs.
.oi-omipttp=et:oe, lgnfr nu[yetx]hvr .oi-omipttp=asod:oe { lgnfr nu[yepswr]hvr -ektbxsao:ist1x1x1x0xrb(5,5,5,.) 0x0x5xrb(5,5,5,.) wbi-o-hdw ne p p p p ga252525 6, p p p ga252525 5; -o-o-hdw ist1x1x1x0xrb(5,5,5,.) 0x0x5xrb(5,5,5,.) mzbxsao: ne p p p p ga252525 6, p p p ga252525 5; bxsao:ist1x1x1x0xrb(5,5,5,.) 0x0x5xrb(5,5,5,.) o-hdw ne p p p p ga252525 6, p p p ga252525 5; }

And for the active state we will change the CSS3 gradient to a lighter one.
.oi-omipttp=et:ou, lgnfr nu[yetx]fcs .oi-omipttp=asod:ou { lgnfr nu[yepswr]fcs bcgon:#111 akrud eee; bcgon:-o-iergain(o, #fff0,#11110) akrud mzlna-rdettp fff % eee 0%; bcgon:-ektgain(ier lf tp lf bto,clrso(%#fff,clrso(0%#111) akrud wbi-rdetlna, et o, et otm oo-tp0,fff) oo-tp10,eee); bcgon:-ektlna-rdettp #fff0,eee 10) akrud wbi-iergain(o, fff %#111 0%; bcgon:--iergain(o, #fff0,eee 10) akrud olna-rdettp fff %#111 0%; bcgon:-slna-rdettp #fff0,eee 10) akrud m-iergain(o, fff %#111 0%; bcgon:lna-rdettp #fff0,eee 10) akrud iergain(o, fff %#111 0%; }

Step 4 Submit Button

Position the submit button to the right by using the float property.
.oi-omipttp=umt { lgnfr nu[yesbi] fot rgt la: ih; cro:pitr usr one; clr #4bf oo: 450; -ektbxsao:ist1x1x1x0xrb(5,5,5,.5,0x1x1x0xrb(,,,.) wbi-o-hdw ne p p p p ga252525 4) p p p p ga000 3; -o-o-hdw ist1x1x1x0xrb(5,5,5,.5,0x1x1x0xrb(,,,.) mzbxsao: ne p p p p ga252525 4) p p p p ga000 3; bxsao:ist1x1x1x0xrb(5,5,5,.5,0x1x1x0xrb(,,,.) o-hdw ne p p p p ga252525 4) p p p p ga000 3; }

For the hover state we will change the shadows and for the active state we will remove them.
.oi-omipttp=umt:oe { lgnfr nu[yesbi]hvr -ektbxsao:ist1x1x3x0xrb(5,5,5,.) 0x1x1x0xrb(,,,.) wbi-o-hdw ne p p p p ga252525 8, p p p p ga000 6; -o-o-hdw ist1x1x3x0xrb(5,5,5,.) 0x1x1x0xrb(,,,.) mzbxsao: ne p p p p ga252525 8, p p p p ga000 6; bxsao:ist1x1x3x0xrb(5,5,5,.) 0x1x1x0xrb(,,,.) o-hdw ne p p p p ga252525 8, p p p p ga000 6; } .oi-omipttp=umt:cie{ lgnfr nu[yesbi]atv -ektbxsao:nn; wbi-o-hdw oe -o-o-hdw nn; mzbxsao: oe bxsao:nn; o-hdw oe }

Add well add a green gradient to the button.

.oi-omipttp=umt, lgnfr nu[yesbi] .s.oi-omsa.hce:eoe{ j lgnfr pncekdbfr bcgon:#5de akrud ac4; bcgon:-o-iergain(o, #5de0,#bfa10) akrud mzlna-rdettp ac4 % 681 0%; bcgon:-ektgain(ier lf tp lf bto,clrso(%#5de,clrso(0%#bfa) akrud wbi-rdetlna, et o, et otm oo-tp0,ac4) oo-tp10,681); bcgon:-ektlna-rdettp #5de0,681 10) akrud wbi-iergain(o, ac4 %#bfa 0%; bcgon:--iergain(o, #5de0,681 10) akrud olna-rdettp ac4 %#bfa 0%; bcgon:-slna-rdettp #5de0,681 10) akrud m-iergain(o, ac4 %#bfa 0%;

designmodo.com/login-form-css3-jquery/

5/13

2/17/13
}

How to Create Login Form with CSS3 and jQuery - Designmodo

bcgon:lna-rdettp #5de0,681 10) akrud iergain(o, ac4 %#bfa 0%;

Step 5 Checkbox Styling

Now we will start the most difficult part because we cant style the checkboxes inputs using CSS like we have styled the other form inputs. The easiest way that Ive found to style it using only CSS its by replacing the checkbox input with a span tag. This will work this way: first we will hide the checkbox input and style the span tag like a checkbox and then we will update the checkbox using jQuery. So when we will click on the span tag jQuery will update the checkbox input to selected, and when we will click again the span tag jQuery will remove the checked from the checkbox input. As some users may have the JavaScript disabled we need to add a fallback. To do that we will add with jQuery a js class to the body tag. So if the JavaScript will be enabled on the page load it will add a js class to the body and if the JavaScript is disabled the class will not be added. So only the users with JavaScript enabled will have the custom styled checkbox. First we will hide the checkbox input.
.s.oi-omipttp=hcbx { j lgnfr nu[yeceko] psto:fxd oiin ie; lf:-99x et 99p; }

Then we will position the span tag.

.oi-omsa { lgnfr pn psto:rltv; oiin eaie mri-o:1p; agntp 5x fot lf; la: et }

Now we will add some basic styles to the span.

.s.oi-omsa { j lgnfr pn wdh 1p; it: 6x hih:1p; egt 6x cro:pitr usr one; -ektbre-ais 2x wbi-odrrdu: p; -o-odrrdu:2x mzbre-ais p; bre-ais 2x odrrdu: p; }

To create the checked state to the span we will create a smallest box and will position it in the middle.
.s.oi-omsa.hce:eoe{ j lgnfr pncekdbfr cnet '; otn: ' psto:aslt; oiin boue tp 4x o: p; lf:4x et p; wdh 8x it: p; hih:8x egt p; -ektbxsao:0x1x1x0xrb(5,5,5,.5,ist0x1x1x0xrb(,,,.) wbi-o-hdw p p p p ga252525 4) ne p p p p ga000 3; -o-o-hdw 0x1x1x0xrb(5,5,5,.5,ist0x1x1x0xrb(,,,.) mzbxsao: p p p p ga252525 4) ne p p p p ga000 3; bxsao:0x1x1x0xrb(5,5,5,.5,ist0x1x1x0xrb(,,,.) o-hdw p p p p ga252525 4) ne p p p p ga000 3; }

designmodo.com/login-form-css3-jquery/

6/13

2/17/13

How to Create Login Form with CSS3 and jQuery - Designmodo

To style the label we will position it to the right of the checkbox and add some basic styles (font, color, etc.).
.oi-omlbl{ lgnfr ae psto:aslt; oiin boue tp 1x o: p; lf:2p; et 5x fn-aiy sn-ei; otfml: assrf fn-egt bl; otwih: od fn-ie 1p; otsz: 2x clr #444 oo: eee; }

All the styles that have the js class at the beginning will only be applied if JavaScript is enabled.

Step 6 jQuery
First we will link to jQuery library using the last version hosted by Google, if you want you can host it on your own server, its your choice. Next add the following code to the bottom of your HTML file just before the </body> closing tag.
<citsc"tp:/jxgolai.o/jxlb/qey171jur.i.s>/cit srp r=hts/aa.ogepscmaa/isjur/../qeymnj"<srp> <cit srp> $dcmn)rayfnto( { (ouet.ed(ucin) / Ceki JvSrp i eald / hc f aacit s nbe $'oy)adls(j'; (bd'.dCas's) / Mk teceko cekdo la / ae h hcbx hce n od $'lgnfr sa'.dCas'hce'.hlrn'nu'.tr'hce' tu) (.oi-om pn)adls(cekd)cide(ipt)at(cekd, re; / Cikfnto / lc ucin $'lgnfr sa'.n'lc' fnto( { (.oi-om pn)o(cik, ucin) i ((hs.hlrn'nu'.tr'hce'){ f $ti)cide(ipt)at(cekd) $ti)cide(ipt)at(cekd,fle; (hs.hlrn'nu'.tr'hce' as) $ti)rmvCas'hce'; (hs.eoels(cekd) } es { le $ti)cide(ipt)at(cekd,tu) (hs.hlrn'nu'.tr'hce' re; $ti)adls(cekd) (hs.dCas'hce'; } }; ) }; ) <srp> /cit

First well add the js class to the body tag.

$'oy)adls(j'; (bd'.dCas's)

Then we will make the checkbox checked by default on load.

$'lgnfr sa'.dCas'hce'.hlrn'nu'.tr'hce' tu) (.oi-om pn)adls(cekd)cide(ipt)at(cekd, re;

With this code we will check if the checkbox is checked and if the result is false the checked class will be removed from the span and if the result is true the checked class will be added to the span tag.
$ti)cide(ipt)at(cekd) (hs.hlrn"nu".tr"hce";

designmodo.com/login-form-css3-jquery/

7/13

2/17/13

How to Create Login Form with CSS3 and jQuery - Designmodo

Conclusion
Congrats! Youve finished this tutorial. I hope it was useful for you and you liked it. Dont forget to leave some feedback in the comments and subscribe us.

Want this freebie? Enter your email and get it now!

Please enter your email address below and click the download button. The download link will be sent to you by email.

Email Address

Download

I agree to receive occasional (monthly/weekly) newsletter with exclusive freebies and content. Your email will not be sold/rented. Unsubscribe at any time.

675
Tweet

29
Suka

34

designmodo.com/login-form-css3-jquery/

8/13

2/17/13

How to Create Login Form with CSS3 and jQuery - Designmodo

Valeriu Timbuc
Valeriu is a Web Designer / Developer currently living in Lisbon, Portugal. He creates some cool stuff using CSS3 and HTML5. You can follow him on Twitter at @vtimbuc or visit his web site at vtimbuc.net.

Related Posts

How to Create Custom Social Media Icons in CSS3

How to Create a CSS3 Mega Drop-Down Menu

20 Excellent jQuery Sliders for your Website

10 Comments

1.
Cyrl Mar 13, 5:54 pm

You could also have added animations for the inputs when clicking on them, from grey to less grey, and revert ;) Reply 0

vijay Jan 11, 3:40 pm

HEllo! plz create as form which can do a sign up and after it can do a log in Reply 0

2.
shreejaya Mar 14, 1:34 pm

Thanks for sharing with us.Upto now i cant this kind of information once again i thanks to u Reply 0

designmodo.com/login-form-css3-jquery/

9/13

2/17/13

How to Create Login Form with CSS3 and jQuery - Designmodo

3.
Lambo Mar 16, 4:47 am

Very slick login layout the only downside even if you tweet like requested, the download button is never activated Still awesome layout & tutorials thanks for Sharing. Reply 0

Valeriu Mar 16, 10:57 am

Thanks Lambo. Try another browser (Chrome, Firefox). Reply 0

4.
Chris Allen Mar 18, 10:21 pm

This is a genuinely useful guide. Just one thing though. Can we build oAuth into this? Because it is very rare you would want to have a standalone login: it can always be easier to authenticate against another social networking site? Reply 0

Valeriu Mar 19, 12:53 am

Yes, this is a styled only login form and dont have attached any login script, so you can use it with your own login system or use social networks, this will work for both. Reply 0

5.
Alfredo Ramirez Mar 20, 3:16 am

Very nice feel and touch, very iPhone look-alike, thanks for sharing!! Reply 0

6.
sopier Oct 13, 9:11 am

I tried this tutorial and the result is not the same as the demo, after changing this line width: 170px; to width: 200px; now the problem is
designmodo.com/login-form-css3-jquery/ 10/13

2/17/13

How to Create Login Form with CSS3 and jQuery - Designmodo

fixed and the result is the same as the demo thanks for the tutorial, its great! Reply 0

7.
Hector Soto Oct 15, 8:42 pm

How about internet explorer major versions who dont support placeholder? Reply 0

Leave a Reply
* Name * Email
Name Email Leave a comment please...

* Comment Minimum length: 20 characters

Submit Comment

Notify me of followup comments via e-mail. You can also subscribe without commenting.

Top Selling ProductsShow more

UI PACK The Bricks UI Addons Bundle Pack $89

iOS UI Pandora UI for iOS $39

UI PACK Impressionist UI $39

Newsletter
Sign up for our newsletter to receive periodic articles, updates, freebies and premium items; every month.
Enter your email address Go Subscribe

designmodo.com/login-form-css3-jquery/

11/13

2/17/13
80,825 Subscribers

How to Create Login Form with CSS3 and jQuery - Designmodo

Sponsors

- Advertise With Us -

Popular Posts (Month) Flat Design: Can You Benefit from the Trend? Polaris UI Free User Interface Pack How to Create a CSS3 Mega Drop-Down Menu Skeuomorphism in User Interface Design, What is It? The Ultimate UX Design of: the Sign-Up Form Retina Ready Images and Responsive Web Design How to Create a CSS3 Login Form Create a Retro Navigation Menu with CSS3 Linecons Free Vector Icons Pack Create a Website Design using The Bricks UI Latest Tutorials How to Create Custom Social Media Icons in CSS3 How to Use Pen Tool in Adobe Photoshop Rapid Prototyping with the Pages Panel in Fireworks CS6 Alignment and Combining Objects in Adobe Illustrator How to Create a CSS3 Mega Drop-Down Menu Create a Website Design using The Bricks UI
designmodo.com/login-form-css3-jquery/ 12/13

2/17/13

How to Create Login Form with CSS3 and jQuery - Designmodo

How to Create a CSS3 Login Form Create a Retro Navigation Menu with CSS3 Creating Objects Using Basic Geometric Shapes in Adobe Illustrator Create a Simple Contact Form in Adobe Photoshop

Privacy Terms Advertise Affiliates About Contact Us Copyright 2013 DesignModo. All Rights Reserved. DMCA Protected Accelerated by MaxCDN

designmodo.com/login-form-css3-jquery/

13/13