Flip Effect: Log In and Sign Up

Submitted by: 
Visitors have accessed this post 4976 times.

Simple login and sign up form built in bootstrap. A flip effect to change from login form to signup form. Easier to direct to other forms without reloading the page. Another way than using the tab class. Hope you like it.

Sample Source Code

This simple source code for the Log In Form for the user, where they can type their username and password to log in​.

  1. <div class="panel panel-default">
  2. <form class="form-horizontal">
  3. <br>
  4. <h1 class="text-center">
  5. LOGO
  6. </h1>
  7. <br>
  8. <input class="form-control" placeholder="Username"/>
  9. <input class="form-control" placeholder="Password"/>
  10. <p class="text-right">
  11. <a href="">Forgot Password</a>
  12. </p>
  13. <button class="btn btn-primary btn-block">LOG IN</button>
  14. <p class="blue">Sign in with</p>
  15. <p>
  16. <i class="fa fa-facebook-f fa-lg"></i>
  17. <i class="fa fa-google-plus fa-lg"></i>
  18. <i class="fa fa-twitter fa-lg"></i>
  19. </p>
  20. <hr>
  21. <p class="text-center">
  22. <a href="#" class="fliper-btn">Create new account?</a>
  23. </p>
  24. </form>
  25. </div>

Also, we have a Sign Up Form for the user to register their account before they can log in.

  1. <div class="panel panel-default">
  2. <form class="form-horizontal">
  3. <br>
  4. <h1 class="text-center">
  5. LOGO
  6. </h1>
  7. <br>
  8. Basic Information
  9. </label>
  10. <input class="form-control" placeholder="Fullname"/>
  11. <input class="form-control" placeholder="Email"/>
  12. Private Information
  13. </label>
  14. <input class="form-control" placeholder="Password"/>
  15. <input class="form-control" placeholder="Mobile Number"/>
  16. <button class="btn btn-primary btn-block">SIGN UP</button>
  17. <p class="text-center">
  18. <a href="#" class="fliper-btn">Already have an account?</a>
  19. </p>
  20. </form>
  21. </div>

Bootsnip Link

So what can you say about this work? Share your thoughts in the comment section below. Practice Coding. Thank you very much.

Note: Due to the size or complexity of this submission, the author has submitted it as a .zip file to shorten your download time. After downloading it, you will need a program like Winzip to decompress it.

Virus note: All files are scanned once-a-day by SourceCodester.com for viruses, but new viruses come out every day, so no prevention program can catch 100% of them.


1. Re-scan downloaded files using your personal virus checker before using it.
2. NEVER, EVER run compiled files (.exe's, .ocx's, .dll's etc.)--only run source code.


get a better coding, you lag created is a bit non-universal so some pc's suffer to display to your specifications

Okay Cool It is Fine

Add new comment

Filtered HTML

  • Web page addresses and e-mail addresses turn into links automatically.
  • You may insert videos with [video:URL]
  • Allowed HTML tags: <a> <em> <strong> <cite> <blockquote> <code> <ul> <ol> <li> <dl> <dt> <dd> <table> <tr> <td> <th> <img> <h1> <h2> <h3> <iframe> [video]
  • You can enable syntax highlighting of source code with the following tags: <code>, <blockcode>, <asp>, <c>, <cpp>, <csharp>, <css>, <html4strict>, <java>, <javascript>, <mysql>, <php>, <python>, <sql>, <vb>, <vbnet>. The supported tag styles are: <foo>, [foo].
  • Lines and paragraphs break automatically.

Plain text

  • No HTML tags allowed.
  • Lines and paragraphs break automatically.
This question is for testing whether or not you are a human visitor and to prevent automated spam submissions.