content logo

Bootstrap Forms:

Crimson Login Form Code with Bootstrap

Purple and crimson theme can give a special beauty to your website code. In this code, we have a login form with a trapezoidal header and a crimson and purple theme. The button used to log in and log in to the account is full width and is purple. By placing the mouse cursor on this button, the button changes color to crimson. But the rest of the form has a white theme.

#Bootstrap Login Form Code #HTML Form Code #HTML Crimson Login Form #Beautiful CSS 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"><i class="far fa-caret-square-right"></i> Login</h3>
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="">E-mail</label>
                            <input type="text" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label for="">Password</label>
                            <input type="password" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="checkbox" class="checkbox" />
                            <label class="check-label" for="">Keep me Signed in</label>
                        </div>
                        <button class="btn signup">Get Started</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: linear-gradient(135deg, #291F22, #D83F58);
    margin: 50px;
}
.form-container {
    font-family: "Raleway", sans-serif;
    padding-right: 15px;
    position: relative;
    z-index: 1;
}
.form-container:before {
    content: "";
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    left: 0;
    right: 0;
    top: 20%;
    bottom: 20%;
    z-index: -1;
}
.form-container .title {
    color: #333;
    background-color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 15px 50px 15px 20px;
    margin: 0;
    display: inline-block;
    clip-path: polygon(0 0, 80% 0%, 100% 100%, 0% 100%);
}
.form-container .title i {
    color: #792d3b;
    margin-right: 10px;
}
.form-container .form-horizontal {
    background: #fff;
    padding: 30px 0 0;
    box-shadow: 10px 10px 10px rgb(0, 0, 0, 0.1);
}
.form-horizontal .form-group {
    padding: 0 25px;
    margin: 0 0 20px;
}
.form-horizontal .form-group:last-of-type {
    margin-bottom: 30px;
}
.form-horizontal .form-group label {
    font-size: 13.5px;
    text-transform: uppercase;
}
.form-horizontal .form-group label.check-label {
    text-transform: none;
    vertical-align: middle;
    display: inline-block;
}
.form-horizontal .form-control {
    color: #111;
    background: #f5f5f5;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    height: 33px;
    padding: 6px 12px;
    border-radius: 0;
    border: none;
    box-shadow: none;
    border-top: 1px solid #e7e7e7;
    border-left: 1px solid #e7e7e7;
}
.form-horizontal .form-control:focus {
    background-color: rgba(216, 63, 88, 0.1);
    box-shadow: none;
}
.form-horizontal .checkbox {
    height: 14px;
    width: 14px;
    min-height: auto;
    margin: 0 3px 0 0;
    border: 1px solid #999;
    cursor: pointer;
    display: inline-block;
    position: relative;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    transition: all 0.3s ease;
}
.form-horizontal .checkbox:before {
    content: "";
    height: 7px;
    width: 14px;
    border-bottom: 3px solid #792d3b;
    border-left: 3px solid #792d3b;
    opacity: 0;
    transform: rotate(-45deg);
    position: absolute;
    left: 1px;
    top: 0;
    transition: all 0.3s ease;
}
.form-horizontal .checkbox:checked {
    border-color: #792d3b;
}
.form-horizontal .checkbox:checked:before {
    opacity: 1;
}
.form-horizontal .checkbox:not(:checked):before {
    opacity: 0;
}
.form-horizontal .checkbox:focus {
    outline: none;
}
.form-horizontal .signup {
    color: #fff;
    background-color: #87314e;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 0;
    display: block;
    transition: all 0.3s ease 0s;
}
.form-horizontal .signup:hover,
.form-horizontal .signup:focus {
    background-color: #df405a;
}
<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: linear-gradient(135deg, #291F22, #D83F58);
    margin: 50px;
}
.form-container {
    font-family: "Raleway", sans-serif;
    padding-right: 15px;
    position: relative;
    z-index: 1;
}
.form-container:before {
    content: "";
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    left: 0;
    right: 0;
    top: 20%;
    bottom: 20%;
    z-index: -1;
}
.form-container .title {
    color: #333;
    background-color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-transform: uppercase;
    padding: 15px 50px 15px 20px;
    margin: 0;
    display: inline-block;
    clip-path: polygon(0 0, 80% 0%, 100% 100%, 0% 100%);
}
.form-container .title i {
    color: #792d3b;
    margin-right: 10px;
}
.form-container .form-horizontal {
    background: #fff;
    padding: 30px 0 0;
    box-shadow: 10px 10px 10px rgb(0, 0, 0, 0.1);
}
.form-horizontal .form-group {
    padding: 0 25px;
    margin: 0 0 20px;
}
.form-horizontal .form-group:last-of-type {
    margin-bottom: 30px;
}
.form-horizontal .form-group label {
    font-size: 13.5px;
    text-transform: uppercase;
}
.form-horizontal .form-group label.check-label {
    text-transform: none;
    vertical-align: middle;
    display: inline-block;
}
.form-horizontal .form-control {
    color: #111;
    background: #f5f5f5;
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 1px;
    height: 33px;
    padding: 6px 12px;
    border-radius: 0;
    border: none;
    box-shadow: none;
    border-top: 1px solid #e7e7e7;
    border-left: 1px solid #e7e7e7;
}
.form-horizontal .form-control:focus {
    background-color: rgba(216, 63, 88, 0.1);
    box-shadow: none;
}
.form-horizontal .checkbox {
    height: 14px;
    width: 14px;
    min-height: auto;
    margin: 0 3px 0 0;
    border: 1px solid #999;
    cursor: pointer;
    display: inline-block;
    position: relative;
    appearance: none;
    -moz-appearance: none;
    -webkit-appearance: none;
    transition: all 0.3s ease;
}
.form-horizontal .checkbox:before {
    content: "";
    height: 7px;
    width: 14px;
    border-bottom: 3px solid #792d3b;
    border-left: 3px solid #792d3b;
    opacity: 0;
    transform: rotate(-45deg);
    position: absolute;
    left: 1px;
    top: 0;
    transition: all 0.3s ease;
}
.form-horizontal .checkbox:checked {
    border-color: #792d3b;
}
.form-horizontal .checkbox:checked:before {
    opacity: 1;
}
.form-horizontal .checkbox:not(:checked):before {
    opacity: 0;
}
.form-horizontal .checkbox:focus {
    outline: none;
}
.form-horizontal .signup {
    color: #fff;
    background-color: #87314e;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    width: 100%;
    padding: 12px;
    border: none;
    border-radius: 0;
    display: block;
    transition: all 0.3s ease 0s;
}
.form-horizontal .signup:hover,
.form-horizontal .signup:focus {
    background-color: #df405a;
}
</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"><i class="far fa-caret-square-right"></i> Login</h3>
                    <form class="form-horizontal">
                        <div class="form-group">
                            <label for="">E-mail</label>
                            <input type="text" class="form-control" />
                        </div>
                        <div class="form-group">
                            <label for="">Password</label>
                            <input type="password" class="form-control" />
                        </div>
                        <div class="form-group">
                            <input type="checkbox" class="checkbox" />
                            <label class="check-label" for="">Keep me Signed in</label>
                        </div>
                        <button class="btn signup">Get Started</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