Simple login form with jQuery sliding effects for any web page. Just put it to your header file. Instead of using any login page use this jQuery form to get attractive look.
Check demo and see full detail to get the code.
Jquery code to execute action:
|
1 2 3 4 5 6 7 8 9 10 11 |
$(document).ready(function(){ $("#LoginButton").click(function(){ if ($("#formContainer").is(":hidden")){ $("#formContainer").slideDown("fast"); } else{ $("#formContainer").slideUp("fast"); } }); }); |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 |
.mainDiv { margin: 0px auto; width:960px; background-color:#ffffff; text-align:left; } body{ margin: 0px; text-align:center; font-family:Arial, Sans-Serif; font-size:0.75em; } .menu { height:30px; border-top:solid 1px #dccfbb; border-bottom:solid 1px #dccfbb; background-color:#4d3a24; } .menu div { padding:10px 30px; } .content { padding:10px 30px; } #formContainer { height:200px; width:351px; FirefoxChromeSafariInternet ExplorerOpera -webkit-border-radius: 30px; -moz-border-radius: 30px; border-radius: 30px; background-color:#dccfbb; display:none; } #formContainer fieldset { padding:30px; border:none; } #formContainer label { display:block; color:#000; } #formContainer input[type=text] { display:block; border:solid 1px #4d3a24; width:100%; margin-bottom:10px; height:24px; } #formContainer input[type=submit] { border:solid 1px #23150c; color:#000; background-color:#fff; padding:5px; } #LoginButton { height:30px; width:150px; FirefoxChromeSafariInternet ExplorerOpera -webkit-border-radius: 30px; padding:10px; text-align:center; display:block; -moz-border-radius: 30px; border-radius: 30px; background-color:#000; color:#fff; font-size:20px; cursor:pointer; } |
HTML
Login
|
1 |
Comments are closed.