Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Forms and Inputs >> CSS3 Animated Login And Registration Form With HTML5 Validation


Code Snippet </> Info


Snippet Name: CSS3 Animated Login And Registration Form With HTML5 Validation

Description: Add a CSS3 Animated Login And Registration Form With HTML5 Validation to your web page forms using this code snippet.

Compatible Browsers:
Chrome BrowserFirefox BrowserInternet Explorer BrowserOpera BrowserSafari Browser

Example: View Code Demo

Note: Change the form action path to point towards your form file.

Author: Md Ashraf Malik

Last Modified: 2015-08-26 22:32:10

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying
Copied To Clipboard!

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"/> <title>CSS3 Animated Login And Registration Form With HTML5 Validation</title> <style> /* CSS3 Animated Login And Registration Form With HTML5 Validation */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE:Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ /* == Created by: Md Ashraf Malik : https://developer.mozilla.org/en-US/profiles/MdAshrafMalik : Creative Commons License == */ * {margin:0;padding:0;} .h2 {color:white;margin-left:10px;height:28px;font-family: 'Lobster Two', cursive;padding:3px 5px;width:332px;border:solid 1px #06F;text-align:center;border-bottom:3px solid #06f;background:#06F;position:relative;} .h2:before {height:20px;width:20px;position:absolute;content:'';background:#06F;left:46%;top:-10px;-webkit-transform:rotate(45deg); -ms-transform:rotate(45deg);-moz-transform:rotate(45deg);} .h2:after {position:absolute;content:'Login Form';height:auto;width:100%;left:0;text-align:center;} .in {padding:8px 7px;border:solid 1px #999999;width:200px;outline:none;margin-top:15px;margin-left:59px;} .button {background:#06F;padding:8px 7px;margin-left:59px;margin-top:15px;border:none;margin-bottom:15px;font-family:Tahoma, Geneva, sans-serif;width:217px;cursor:pointer;border: solid 1px #06F;font-size:16px;color:white;} .in:focus:invalid {border-color:#06F;} .log,.sig {width:340px;border:solid 2px #06F;height:auto;border-top:none;margin-left:10px;} /* labels */ #ul li {float:left;list-style:none;} #ul li a {text-decoration:none;background:#930;color:white;margin-left:55px;padding:10px 13px;font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;} #login,#signup {display:none;} #ul li a label {padding:8px 15px;cursor:pointer;} #login:checked ~ ul li a.login {background:#06f;} #login:checked ~ .sig {height:0px;overflow:hidden;border:none;transition:height 2s;} #signup:checked ~ .log {height:0px;overflow:hidden;} #signup:checked ~ .sig {height:auto;} #signup:checked ~ ul li a.signup {background:#06f;} #signup:checked ~ .h2:after {content:'Registration Form';} .reg {height:auto;width:30%;margin-left:35%;margin-top:10%;} /* not part of the code below */ .notes{font-family:arial, verdana, tahoma;color:#000;text-align:center;} </style> <link href="http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic,700,700italic" rel="stylesheet" type="text/css"> </head> <body> <div style="text-align:center;font-family:verdana,arial;">CSS3 Animated Login And Registration Form With HTML5 Validation</div> <div class="reg"> <input type="radio" checked id="login" name="log"/> <input type="radio" id="signup" name="log" /> <ul id="ul"> <li><a href="#login" class="login"><label for="login">Login</label></a></li> <li><a href="#signup" class="signup"><label for="signup">Signup</label></a></li> </ul> <br /><br /> <h2 class="h2"></h2> <form action="#" class="log"> <input type="email" placeholder="Your Email" required class="in"/><br> <input type="password" placeholder="Your Password" required class="in"/><br> <input type="submit" value="LogIn" class="button" /> </form> <form action="#" class="sig"> <input type="text" placeholder="Your Name" required class="in" /><br> <input type="tel" placeholder="Choose Username" required class="in" /><br> <input type="email" placeholder="Your Email" required class="in"/><br> <input type="password" placeholder="Your Password" required class="in"/><br> <input type="submit" value="SignUp" class="button" /> </form> </div> <br /><br /> <div class="notes">Click the buttons above to preview the effect.</div> <br /><br /> <div class="notes"> [ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_252.html">CSS3 Animated Login And Registration Form With HTML5 Validation Code Snippet</a> page. ] </div> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library