Bootstrap Forms:

Bootstrap Login / Forget Password Forms with Flip Transition Effect

The registration section is critical for all websites, and it is better to choose a beautiful design for your page. If you like to have an amazing bootstrap login form, look at this part carefully. The Bootstrap Login / Forget Password Forms with Flip Transition Effect is presented with an awesome design. This Flip Effect Forms Code allows users to enter and sign in to a website easily. This is so helpful for any website.

The following Bootstrap Login Form has an artistic background in blue, gray, and red. These HTML Bootstrap Forms have two titles. The first one is for signing in, and the second is for forgetting the password. These titles are white, and as you click on each one, its specific section will appear. By selecting these titles, its part will represent by a flip transition effect. The main section of this Bootstrap Forms Transition Effect is colorless with a border. On the other hand, the confirm options in the two fields are blue, and the writings are white. The sign-in side has two fields, while the Bootstrap Forget Password Form has only one part to fill.

HTML Bootstrap Forms

Bootstrap Forms Transition Effect

Flip Effect Forms Code

Bootstrap Login Form

Bootstrap Forget Password Form

<!-- This script got from 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://frontendfreecode.com">Free Frontend</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 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">Free Frontend</a></div>

</body>
</html>

Preview

Developers Codes
Graphic Photo World
Crypto Best World
Code Free Tutorial
CSS Free Codes
PHP Free Codes
Javascript Codes

TOP CODES

Toggle Switch Button for Changing Language with Bootstrap

Draggable Cards with Bootstrap Grids

Bootstrap Table with Add New Row Button

WHAT IS NEW IN KERIXA?

Glassy Chat Box Code with Reaction Emojis

Dark Neo Brutal Resume Template

Nvidia RTX 3070 Graphic Card Hashrate and Mining Profitability

Nvidia RTX 3080 Graphic Card Hashrate and Mining Profitability

Flat Photo Frame Template

Cute Photo Frame Template

16 React JS Accordions

17 React JS Buttons

RECENT CODES

Bootstrap Timeline with Colorful Lines and Icons

Simple Dark Vertical Timeline with Bootstrap

Colorful Icons for Bootstrap Timeline Joints

Bootstrap Vertical Timeline with Image Cards and Descriptions

Vertical Bootstrap Timeline in Half Page

Drop Down Menu by React JS

Animating React Popup with Float in and Zoom Effects

Popup vs. Alert Code using React JS

React Glassy Gradient Popup Modal

Animating Toggle Popup Menu with React JS

Bootstrap Accordions	Bootstrap Buttons
Bootstrap Cards	Bootstrap Footers
Bootstrap Forms	Bootstrap Grids
Bootstrap Headers	Bootstrap Paginations
Bootstrap Popups	Bootstrap Progress Bars
Bootstrap Search Boxes	Bootstrap Sidebars
Bootstrap Sliders	Bootstrap Tables
Bootstrap Tabs	Bootstrap Thumbnails
Bootstrap Timeline	Bootstrap Toggle Switches
React Accordions	React Buttons
React Forms	React Headers
React Menus	React Popups
React Progress Bars	React Sidebars