Bootstrap Forms:

Stylish Login Form with Button Effect using Bootstrap

Most users tend to enter websites through their accounts. There is the Stylish Login Form with Button Effect using Bootstrap in this post with a beautiful design. Plus, this Bootstrap Login Form Code is so functional and represents an outstanding performance. If the audiences use this form, they can easily enter their accounts. So, you understand the importance of this code and apply it to your website.

The following Free Form Code has an attractive style and appearance. It has a colorful background in blue and orange. The blue color is dark and light. The title of the account is placed at the top of the page in white color. As the preview of this Stylish HTML Login Form shows, the main page has a white background, and there are two fields for username and password. The writing of these sections is black. If you forget your password, you can easily select that part and reset it. The login confirmation is placed in an orange field, and when you choose it, this button represents an effect. This CSS Form with Effect is available from the link below. Download and apply it on your website.

Bootstrap Login Form Code

Free Form Code

CSS Form with Effect

Stylish HTML Login Form

<!-- This script got from frontendfreecode.com -->
<div class="form-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6">
                <div class="form-container">
                    <h3 class="title">My Account</h3>
                    <form class="form-horizontal">
                        <div class="form-icon">
                            <i class="fa fa-user-circle"></i>
                        </div>
                        <div class="form-group">
                            <span class="input-icon"><i class="fa fa-user"></i></span>
                            <input type="email" class="form-control" placeholder="Username" />
                        </div>
                        <div class="form-group">
                            <span class="input-icon"><i class="fa fa-lock"></i></span>
                            <input type="password" class="form-control" placeholder="Password" />
                            <span class="forgot"><a href="#">Forgot Password?</a></span>
                        </div>
                        <button class="btn signin">Login</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div><a style="font-size: 8pt; text-decoration: none" target="_blank" href="http://frontendfreecode.com">Free Frontend</a>

body {
    background: #222;
    margin: 50px;
}
.form-container {
    background: linear-gradient(150deg, #1b394d 33%, #2d9da7 34%, #2d9da7 66%, #ec5f20 67%);
    font-family: "Raleway", sans-serif;
    text-align: center;
    padding: 30px 20px 50px;
}
.form-container .title {
    color: #fff;
    font-size: 23px;
    text-transform: capitalize;
    letter-spacing: 1px;
    margin: 0 0 60px;
}
.form-container .form-horizontal {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.form-horizontal .form-icon {
    color: #fff;
    background-color: #1b394d;
    font-size: 75px;
    line-height: 92px;
    height: 90px;
    width: 90px;
    margin: -65px auto 10px;
    border-radius: 50%;
}
.form-horizontal .form-group {
    margin: 0 0 10px;
    position: relative;
}
.form-horizontal .form-group:nth-child(3) {
    margin-bottom: 30px;
}
.form-horizontal .form-group .input-icon {
    color: #e7e7e7;
    font-size: 23px;
    position: absolute;
    left: 0;
    top: 10px;
}
.form-horizontal .form-control {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    height: 50px;
    padding: 10px 10px 10px 40px;
    margin: 0 0 5px;
    border: none;
    border-bottom: 2px solid #e7e7e7;
    border-radius: 0px;
    box-shadow: none;
}
.form-horizontal .form-control:focus {
    box-shadow: none;
    border-bottom-color: #ec5f20;
}
.form-horizontal .form-control::placeholder {
    color: #000;
    font-size: 16px;
    font-weight: 600;
}
.form-horizontal .forgot {
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    display: block;
}
.form-horizontal .forgot a {
    color: #777;
    transition: all 0.3s ease 0s;
}
.form-horizontal .forgot a:hover {
    color: #777;
    text-decoration: underline;
}
.form-horizontal .signin {
    color: #fff;
    background-color: #ec5f20;
    font-size: 17px;
    text-transform: capitalize;
    letter-spacing: 2px;
    width: 100%;
    padding: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease 0s;
}
.form-horizontal .signin:hover,
.form-horizontal .signin:focus {
    font-weight: 600;
    letter-spacing: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.13/css/all.css">
<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
body {
    background: #222;
    margin: 50px;
}
.form-container {
    background: linear-gradient(150deg, #1b394d 33%, #2d9da7 34%, #2d9da7 66%, #ec5f20 67%);
    font-family: "Raleway", sans-serif;
    text-align: center;
    padding: 30px 20px 50px;
}
.form-container .title {
    color: #fff;
    font-size: 23px;
    text-transform: capitalize;
    letter-spacing: 1px;
    margin: 0 0 60px;
}
.form-container .form-horizontal {
    background-color: #fff;
    padding: 20px;
    border-radius: 5px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.4);
}
.form-horizontal .form-icon {
    color: #fff;
    background-color: #1b394d;
    font-size: 75px;
    line-height: 92px;
    height: 90px;
    width: 90px;
    margin: -65px auto 10px;
    border-radius: 50%;
}
.form-horizontal .form-group {
    margin: 0 0 10px;
    position: relative;
}
.form-horizontal .form-group:nth-child(3) {
    margin-bottom: 30px;
}
.form-horizontal .form-group .input-icon {
    color: #e7e7e7;
    font-size: 23px;
    position: absolute;
    left: 0;
    top: 10px;
}
.form-horizontal .form-control {
    color: #000;
    font-size: 16px;
    font-weight: 600;
    height: 50px;
    padding: 10px 10px 10px 40px;
    margin: 0 0 5px;
    border: none;
    border-bottom: 2px solid #e7e7e7;
    border-radius: 0px;
    box-shadow: none;
}
.form-horizontal .form-control:focus {
    box-shadow: none;
    border-bottom-color: #ec5f20;
}
.form-horizontal .form-control::placeholder {
    color: #000;
    font-size: 16px;
    font-weight: 600;
}
.form-horizontal .forgot {
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    display: block;
}
.form-horizontal .forgot a {
    color: #777;
    transition: all 0.3s ease 0s;
}
.form-horizontal .forgot a:hover {
    color: #777;
    text-decoration: underline;
}
.form-horizontal .signin {
    color: #fff;
    background-color: #ec5f20;
    font-size: 17px;
    text-transform: capitalize;
    letter-spacing: 2px;
    width: 100%;
    padding: 12px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
    transition: all 0.4s ease 0s;
}
.form-horizontal .signin:hover,
.form-horizontal .signin:focus {
    font-weight: 600;
    letter-spacing: 5px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) inset;
}
</style>

</head>
<body>
<div class="form-bg">
    <div class="container">
        <div class="row">
            <div class="col-md-offset-4 col-md-4 col-sm-offset-3 col-sm-6">
                <div class="form-container">
                    <h3 class="title">My Account</h3>
                    <form class="form-horizontal">
                        <div class="form-icon">
                            <i class="fa fa-user-circle"></i>
                        </div>
                        <div class="form-group">
                            <span class="input-icon"><i class="fa fa-user"></i></span>
                            <input type="email" class="form-control" placeholder="Username" />
                        </div>
                        <div class="form-group">
                            <span class="input-icon"><i class="fa fa-lock"></i></span>
                            <input type="password" class="form-control" placeholder="Password" />
                            <span class="forgot"><a href="#">Forgot Password?</a></span>
                        </div>
                        <button class="btn signin">Login</button>
                    </form>
                </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