content logo

Bootstrap Forms:

Circular Login Form using Bootstrap

You can use this code to make your website more beautiful. In this code we have a form that unlike other forms which are rectangular. This form is circular and the background outside the form is also green. The login button is also in the form of a circle in the corner of the form and its color is red. By placing the mouse cursor on this button, the writings on the button are slightly separated from each other.

#Circular Login Form Code #Bootstrap Login Form Code #HTML Login Code #CSS 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">
                    <form class="form-horizontal">
                        <h3 class="title">User Login</h3>
                        <div class="form-group">
                            <span class="input-icon"><i class="fa fa-user"></i></span>
                            <input class="form-control" type="email" placeholder="Username" />
                        </div>
                        <div class="form-group">
                            <span class="input-icon"><i class="fa fa-lock"></i></span>
                            <input class="form-control" type="password" placeholder="Password" />
                        </div>
                        <span class="forgot-pass"><a href="#">Lost password?</a></span>
                        <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-color: #8BD6BF;
    margin: 20px;
}
.form-container {
    font-family: "Overpass", sans-serif;
}
.form-container .form-horizontal {
    background: linear-gradient(to right, #202926 49%, #15201c 50%);
    width: 350px;
    height: 350px;
    padding: 75px 55px;
    margin: 0 auto;
    border-radius: 50%;
}
.form-container .title {
    color: #838585;
    font-family: "Teko", sans-serif;
    font-size: 35px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
}
.form-horizontal .form-group {
    background-color: rgba(255, 255, 255, 0.15);
    font-size: 0;
    margin: 0 0 15px;
    border: 1px solid #838585;
    border-radius: 3px;
}
.form-horizontal .input-icon {
    color: #838585;
    font-size: 16px;
    text-align: center;
    line-height: 48px;
    height: 45px;
    width: 40px;
    vertical-align: top;
    display: inline-block;
}
.form-horizontal .form-control {
    color: #838585;
    background-color: transparent;
    font-size: 14px;
    letter-spacing: 1px;
    width: calc(100% - 55px);
    height: 45px;
    padding: 2px 10px 0 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    display: inline-block;
    transition: all 0.3s;
}
.form-horizontal .form-control:focus {
    box-shadow: none;
    border: none;
}
.form-horizontal .form-control::placeholder {
    color: #838585;
    font-size: 13px;
    text-transform: capitalize;
}
.form-horizontal .btn {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(235, 74, 92, 0.95);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 120px;
    height: 120px;
    line-height: 120px;
    margin: 0 0 15px 0;
    border: none;
    border-radius: 50%;
    display: inline-block;
    transform: translateX(30px);
    transition: all 0.3s ease;
}
.form-horizontal .btn:hover,
.form-horizontal .btn:focus {
    color: #fff;
    letter-spacing: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.form-horizontal .forgot-pass {
    font-size: 12px;
    text-align: left;
    width: calc(100% - 125px);
    display: inline-block;
    vertical-align: top;
}
.form-horizontal .forgot-pass a {
    color: #999;
    transition: all 0.3s ease;
}
.form-horizontal .forgot-pass a:hover {
    color: #555;
    text-decoration: underline;
}
@media only screen and (max-width: 379px) {
    .form-container .form-horizontal {
        width: 100%;
    }
}
<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-color: #8BD6BF;
    margin: 20px;
}
.form-container {
    font-family: "Overpass", sans-serif;
}
.form-container .form-horizontal {
    background: linear-gradient(to right, #202926 49%, #15201c 50%);
    width: 350px;
    height: 350px;
    padding: 75px 55px;
    margin: 0 auto;
    border-radius: 50%;
}
.form-container .title {
    color: #838585;
    font-family: "Teko", sans-serif;
    font-size: 35px;
    font-weight: 400;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 10px 0;
}
.form-horizontal .form-group {
    background-color: rgba(255, 255, 255, 0.15);
    font-size: 0;
    margin: 0 0 15px;
    border: 1px solid #838585;
    border-radius: 3px;
}
.form-horizontal .input-icon {
    color: #838585;
    font-size: 16px;
    text-align: center;
    line-height: 48px;
    height: 45px;
    width: 40px;
    vertical-align: top;
    display: inline-block;
}
.form-horizontal .form-control {
    color: #838585;
    background-color: transparent;
    font-size: 14px;
    letter-spacing: 1px;
    width: calc(100% - 55px);
    height: 45px;
    padding: 2px 10px 0 0;
    box-shadow: none;
    border: none;
    border-radius: 0;
    display: inline-block;
    transition: all 0.3s;
}
.form-horizontal .form-control:focus {
    box-shadow: none;
    border: none;
}
.form-horizontal .form-control::placeholder {
    color: #838585;
    font-size: 13px;
    text-transform: capitalize;
}
.form-horizontal .btn {
    color: rgba(255, 255, 255, 0.8);
    background: rgba(235, 74, 92, 0.95);
    font-size: 15px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1px;
    width: 120px;
    height: 120px;
    line-height: 120px;
    margin: 0 0 15px 0;
    border: none;
    border-radius: 50%;
    display: inline-block;
    transform: translateX(30px);
    transition: all 0.3s ease;
}
.form-horizontal .btn:hover,
.form-horizontal .btn:focus {
    color: #fff;
    letter-spacing: 4px;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}
.form-horizontal .forgot-pass {
    font-size: 12px;
    text-align: left;
    width: calc(100% - 125px);
    display: inline-block;
    vertical-align: top;
}
.form-horizontal .forgot-pass a {
    color: #999;
    transition: all 0.3s ease;
}
.form-horizontal .forgot-pass a:hover {
    color: #555;
    text-decoration: underline;
}
@media only screen and (max-width: 379px) {
    .form-container .form-horizontal {
        width: 100%;
    }
}
</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">
                    <form class="form-horizontal">
                        <h3 class="title">User Login</h3>
                        <div class="form-group">
                            <span class="input-icon"><i class="fa fa-user"></i></span>
                            <input class="form-control" type="email" placeholder="Username" />
                        </div>
                        <div class="form-group">
                            <span class="input-icon"><i class="fa fa-lock"></i></span>
                            <input class="form-control" type="password" placeholder="Password" />
                        </div>
                        <span class="forgot-pass"><a href="#">Lost password?</a></span>
                        <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