content logo

Bootstrap Forms:

Stylish Login Form with Button Effect using Bootstrap

On websites where users of that website have an account, people can log in to their account with a login form. In this code, this form is made more beautiful by an orange and blue theme background. No image was used for the background of this form and only CSS code was used. At the bottom of the form there is a button labeled Enter. This button has more space between its letters in hover mode.

#Bootstrap Login Form Code #Free Form Code #CSS Form with Effect #Stylish HTML Login Form

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

</body>
</html>
Preview