content logo

Bootstrap Forms:

Bootstrap Login / Forget Password Forms with Flip Transition Effect

For websites that need users to log in to the account area, there should be forms that do this for them. In this code, we have implemented the same forms for you. Instead of having two separate pages for login and registration, you can use one page and this page will be switched between these two forms with a flip effect. Both of these forms have a background and cover a clear gray color on the background image.

#HTML Bootstrap Forms #Bootstrap Forms Transition Effect #Flip Effect Forms Code #Bootstrap Login Form #Bootstrap Forget Password Form

<!-- This script got from www.frontendfreecode.com -->
<div class="login-wrap">
    <div class="login-html">
        <input id="tab-1" type="radio" name="tab" class="sign-in" checked /><label for="tab-1" class="tab">Sign In</label> <input id="tab-2" type="radio" name="tab" class="for-pwd" /><label for="tab-2" class="tab">Forgot Password</label>
        <div class="login-form">
            <div class="sign-in-htm">
                <div class="group">
                    <label for="user" class="label">Username or Email</label>
                    <input id="user" type="text" class="input" />
                </div>
                <div class="group">
                    <label for="pass" class="label">Password</label>
                    <input id="pass" type="password" class="input" data-type="password" />
                </div>
                <div class="group">
                    <input type="submit" class="button" value="Sign In" />
                </div>
                <div class="hr"></div>
            </div>
            <div class="for-pwd-htm">
                <div class="group">
                    <label for="user" class="label">Username or Email</label>
                    <input id="user" type="text" class="input" />
                </div>
                <div class="group">
                    <input type="submit" class="button" value="Reset Password" />
                </div>
                <div class="hr"></div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://www.frontendfreecode.com">Frontend Free Code</a>
                                                                            
body {
    margin: 0;
    color: #edf3ff;
    background: #c8c8c8;
    background: url(http://frontendfreecode.com/img/material-design-4k-2048x1152.jpg) fixed;
    background-size: cover;
    font: 600 16px/18px "Open Sans", sans-serif;
}
:after,
:before {
    box-sizing: border-box;
}
.clearfix:after,
.clearfix:before {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
    display: block;
}
a {
    color: inherit;
    text-decoration: none;
}
.login-wrap {
    width: 100%;
    margin: auto;
    max-width: 510px;
    min-height: 510px;
    position: relative;
    background: url(http://frontendfreecode.com/img/material-1-1000x563.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.login-html {
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 90px 70px 50px 70px;
    background: rgba(0, 0, 0, 0.5);
}
.login-html .sign-in-htm,
.login-html .for-pwd-htm {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
}
.login-html .sign-in,
.login-html .for-pwd,
.login-form .group .check {
    display: none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button {
    text-transform: uppercase;
}
.login-html .tab {
    font-size: 22px;
    margin-right: 15px;
    padding-bottom: 5px;
    margin: 0 15px 10px 0;
    display: inline-block;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.login-html .sign-in:checked + .tab,
.login-html .for-pwd:checked + .tab {
    color: #fff;
    border-color: #1161ee;
}
.login-form {
    min-height: 345px;
    position: relative;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.login-form .group {
    margin-bottom: 15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button {
    width: 100%;
    color: #fff;
    display: block;
}
.login-form .group .input,
.login-form .group .button {
    padding: 15px 20px;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
}
.login-form .group input[data-type="password"] {
    text-security: circle;
    -webkit-text-security: circle;
}
.login-form .group .label {
    color: #aaa;
    font-size: 12px;
}
.login-form .group .button {
    background: #1161ee;
}
.login-form .group label .icon {
    width: 15px;
    height: 15px;
    border-radius: 2px;
    position: relative;
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after {
    content: "";
    width: 10px;
    height: 2px;
    background: #fff;
    position: absolute;
    -webkit-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}
.login-form .group label .icon:before {
    left: 3px;
    width: 5px;
    bottom: 6px;
    -webkit-transform: scale(0) rotate(0);
    transform: scale(0) rotate(0);
}
.login-form .group label .icon:after {
    top: 6px;
    right: 0;
    -webkit-transform: scale(0) rotate(0);
    transform: scale(0) rotate(0);
}
.login-form .group .check:checked + label {
    color: #fff;
}
.login-form .group .check:checked + label .icon {
    background: #1161ee;
}
.login-form .group .check:checked + label .icon:before {
    -webkit-transform: scale(1) rotate(45deg);
    transform: scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after {
    -webkit-transform: scale(1) rotate(-45deg);
    transform: scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .for-pwd + .tab + .login-form .sign-in-htm {
    -webkit-transform: rotate(0);
    transform: rotate(0);
}
.login-html .for-pwd:checked + .tab + .login-form .for-pwd-htm {
    -webkit-transform: rotate(0);
    transform: rotate(0);
}
.hr {
    height: 2px;
    margin: 60px 0 50px 0;
    background: rgba(255, 255, 255, 0.2);
}
.foot-lnk {
    text-align: center;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- This script got from www.frontendfreecode.com -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<style>
body {
    margin: 0;
    color: #edf3ff;
    background: #c8c8c8;
    background: url(http://frontendfreecode.com/img/material-design-4k-2048x1152.jpg) fixed;
    background-size: cover;
    font: 600 16px/18px "Open Sans", sans-serif;
}
:after,
:before {
    box-sizing: border-box;
}
.clearfix:after,
.clearfix:before {
    content: "";
    display: table;
}
.clearfix:after {
    clear: both;
    display: block;
}
a {
    color: inherit;
    text-decoration: none;
}
.login-wrap {
    width: 100%;
    margin: auto;
    max-width: 510px;
    min-height: 510px;
    position: relative;
    background: url(http://frontendfreecode.com/img/material-1-1000x563.jpg) no-repeat center;
    background-size: cover;
    box-shadow: 0 12px 15px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19);
}
.login-html {
    width: 100%;
    height: 100%;
    position: absolute;
    padding: 90px 70px 50px 70px;
    background: rgba(0, 0, 0, 0.5);
}
.login-html .sign-in-htm,
.login-html .for-pwd-htm {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    position: absolute;
    -webkit-transform: rotateY(180deg);
    transform: rotateY(180deg);
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-transition: all 0.4s linear;
    transition: all 0.4s linear;
}
.login-html .sign-in,
.login-html .for-pwd,
.login-form .group .check {
    display: none;
}
.login-html .tab,
.login-form .group .label,
.login-form .group .button {
    text-transform: uppercase;
}
.login-html .tab {
    font-size: 22px;
    margin-right: 15px;
    padding-bottom: 5px;
    margin: 0 15px 10px 0;
    display: inline-block;
    border-bottom: 2px solid transparent;
    cursor: pointer;
}
.login-html .sign-in:checked + .tab,
.login-html .for-pwd:checked + .tab {
    color: #fff;
    border-color: #1161ee;
}
.login-form {
    min-height: 345px;
    position: relative;
    -webkit-perspective: 1000px;
    perspective: 1000px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
}
.login-form .group {
    margin-bottom: 15px;
}
.login-form .group .label,
.login-form .group .input,
.login-form .group .button {
    width: 100%;
    color: #fff;
    display: block;
}
.login-form .group .input,
.login-form .group .button {
    padding: 15px 20px;
    border-radius: 25px;
    background: rgba(255, 255, 255, 0.1);
}
.login-form .group input[data-type="password"] {
    text-security: circle;
    -webkit-text-security: circle;
}
.login-form .group .label {
    color: #aaa;
    font-size: 12px;
}
.login-form .group .button {
    background: #1161ee;
}
.login-form .group label .icon {
    width: 15px;
    height: 15px;
    border-radius: 2px;
    position: relative;
    display: inline-block;
    background: rgba(255, 255, 255, 0.1);
}
.login-form .group label .icon:before,
.login-form .group label .icon:after {
    content: "";
    width: 10px;
    height: 2px;
    background: #fff;
    position: absolute;
    -webkit-transition: all 0.2s ease-in-out 0s;
    transition: all 0.2s ease-in-out 0s;
}
.login-form .group label .icon:before {
    left: 3px;
    width: 5px;
    bottom: 6px;
    -webkit-transform: scale(0) rotate(0);
    transform: scale(0) rotate(0);
}
.login-form .group label .icon:after {
    top: 6px;
    right: 0;
    -webkit-transform: scale(0) rotate(0);
    transform: scale(0) rotate(0);
}
.login-form .group .check:checked + label {
    color: #fff;
}
.login-form .group .check:checked + label .icon {
    background: #1161ee;
}
.login-form .group .check:checked + label .icon:before {
    -webkit-transform: scale(1) rotate(45deg);
    transform: scale(1) rotate(45deg);
}
.login-form .group .check:checked + label .icon:after {
    -webkit-transform: scale(1) rotate(-45deg);
    transform: scale(1) rotate(-45deg);
}
.login-html .sign-in:checked + .tab + .for-pwd + .tab + .login-form .sign-in-htm {
    -webkit-transform: rotate(0);
    transform: rotate(0);
}
.login-html .for-pwd:checked + .tab + .login-form .for-pwd-htm {
    -webkit-transform: rotate(0);
    transform: rotate(0);
}
.hr {
    height: 2px;
    margin: 60px 0 50px 0;
    background: rgba(255, 255, 255, 0.2);
}
.foot-lnk {
    text-align: center;
}
</style>

</head>
<body>
<div class="login-wrap">
    <div class="login-html">
        <input id="tab-1" type="radio" name="tab" class="sign-in" checked /><label for="tab-1" class="tab">Sign In</label> <input id="tab-2" type="radio" name="tab" class="for-pwd" /><label for="tab-2" class="tab">Forgot Password</label>
        <div class="login-form">
            <div class="sign-in-htm">
                <div class="group">
                    <label for="user" class="label">Username or Email</label>
                    <input id="user" type="text" class="input" />
                </div>
                <div class="group">
                    <label for="pass" class="label">Password</label>
                    <input id="pass" type="password" class="input" data-type="password" />
                </div>
                <div class="group">
                    <input type="submit" class="button" value="Sign In" />
                </div>
                <div class="hr"></div>
            </div>
            <div class="for-pwd-htm">
                <div class="group">
                    <label for="user" class="label">Username or Email</label>
                    <input id="user" type="text" class="input" />
                </div>
                <div class="group">
                    <input type="submit" class="button" value="Reset Password" />
                </div>
                <div class="hr"></div>
            </div>
        </div>
    </div>
</div><div id="bcl"><a style="font-size:8pt;text-decoration:none;" href="http://www.devanswer.com">Frontend Free Code</a></div>

</body>
</html>
Preview