Login Form with Modern UI and Animation using Bootstrap (Html and Css)

In today’s digital age, a user’s first interaction with a website is often through the login page. Making this experience visually appealing, functional, and accessible is crucial. In this blog post, we will design a login form with a modern UI, enriched with focus-enhancing animations, and built entirely using HTML and CSS. By the end of the article, you will have a login page that is both user-friendly and SEO-compliant.

Why Is Design Important in Login Forms?

A well-designed login form:

Enhances user experience.
Boosts professionalism and trust.
Aligns with your brand’s aesthetics.
Can increase user engagement.

Our login form features a minimal yet attractive design enriched with effective focus animations and hover effects.

Code: Build Your Login Form

Here is the complete HTML and CSS code for the modern login form.

Login Form HTML Code:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.7.1/css/all.min.css"
      integrity="sha512-5Hs3dF2AEPkpNAR7UiOHba+lRSJNeM2ECkwxUIxC1Q/FLycGTbNapWXB4tP889k5T5Ju8fs4b1P5z/iB4nMfSQ=="
      crossorigin="anonymous"
      referrerpolicy="no-referrer"
    />
    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <link rel="preconnect" href="https://fonts.googleapis.com" />
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&display=swap"
      rel="stylesheet"
    />
    <title>Login Form</title>
  </head>
  <body>
    <div class="container d-flex justify-content-center align-items-center">
      <div class="d-flex p-4 login-container">
        <div class="col-5 left-bg">
          <div class="login-switch">
            <span>Login</span>
          </div>
          <div class="if-dont-account">If you have an account click here</div>
          <div class="if-account">If you have an account click here</div>
          <div class="signup-switch">
            <span>Sign Up</span>
          </div>
          <div class="overlay">
            <span>Gene Cernan</span>
            <h3>
              " The exploration of space, like the exploration of life, if you
              will, is a risk. We've got to be willing to take it. "
            </h3>
          </div>
        </div>
        <div class="col-7 right-area d-flex flex-column justify-content-center">
          <h1 class="fs-3 mb-4">
            Welcome! <br />
            <span class="highlight"> Create Your Account</span>
          </h1>
          <div class="buttons d-flex gap-4">
            <a href="" class="btn1"
              ><i class="fa-brands fa-google"></i>with Google</a
            >
            <a href="" class="btn2"><i class="fa-brands fa-facebook"></i></a>
            <a href="" class="btn2"
              ><i class="fa-brands fa-square-x-twitter"></i
            ></a>
          </div>
          <div class="py-4">
            <span class="or">Or</span>
          </div>

          <form action="" class="d-flex flex-column gap-3">
            <div class="d-flex gap-4 signup-part-form">
              <div class="mb-3 d-flex flex-column w-100">
                <label for="exampleInputEmail1" class="form-label"
                  >Email address</label
                >
                <input
                  type="email"
                  class="form-control"
                  id="exampleInputEmail1"
                  aria-describedby="emailHelp"
                  placeholder="Enter email"
                />
                <!-- <div id="emailHelp" class="form-text">
                  We'll never share your email with anyone else.
                </div> -->
              </div>
              <div class="mb-3 d-flex flex-column w-100">
                <label for="exampleInputEmail1" class="form-label"
                  >Phone Number</label
                >
                <input
                  type="tel"
                  class="form-control"
                  id="exampleInputPhone1"
                  aria-describedby="phoneHelp"
                  placeholder="Enter phone number"
                />
                <!-- <div id="emailHelp" class="form-text">
                  We'll never share your email with anyone else.
                </div> -->
              </div>
            </div>

            <div class="d-flex gap-4">
              <div class="mb-3 d-flex flex-column w-100">
                <label for="exampleInputEmail1" class="form-label"
                  >Username</label
                >
                <input
                  type="text"
                  class="form-control"
                  id="exampleInputEmail1"
                  aria-describedby="emailHelp"
                  placeholder="Enter username"
                />
                <!-- <div id="emailHelp" class="form-text">
                  We'll never share your email with anyone else.
                </div> -->
              </div>
              <div class="mb-3 d-flex flex-column w-100">
                <label for="exampleInputEmail1" class="form-label"
                  >Password</label
                >
                <input
                  type="password"
                  class="form-control"
                  id="exampleInputPhone1"
                  aria-describedby="phoneHelp"
                  placeholder="Enter password"
                />
                <!-- <div id="emailHelp" class="form-text">
                  We'll never share your email with anyone else.
                </div> -->
              </div>
            </div>
            <div class="checkbox">
              <label class="checkbox-container">
                <input type="checkbox" checked />
                <div class="custom-checkbox"></div>
                I agree to terms and conditions
              </label>
            </div>
            <button class="sign-up mt-3">Sign Up</button>
          </form>
        </div>
      </div>
    </div>
    
    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
  </body>
</html>

Login Form CSS Code:

:root{
    --color1: #87cda6;
    --color2: #b9e5c0;
}

body{
    background-image: linear-gradient( 135deg, #79F1A4 10%, #0E5CAD 100%);
    font-family: "Roboto Serif", serif;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
}
.login-container{
    gap: 30px;
    background-image: linear-gradient( 135deg, #217b71 10%, #26786f 100%);
    border-radius: 40px;
    width: 1100px;
    height: 650px;
    -webkit-border-radius: 40px;
    -moz-border-radius: 40px;
    -ms-border-radius: 40px;
    -o-border-radius: 40px;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
    transition: .4s all ease;
    -webkit-transition: .4s all ease;
    -moz-transition: .4s all ease;
    -ms-transition: .4s all ease;
    -o-transition: .4s all ease;
}
.overlay{
    position: absolute;
    left: 0;
    top: 0;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    padding: 2rem;
    height: 100%;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
    color: #b9e5c0;
}
.overlay span{
    font-weight: 600;
    font-size: 1.2rem;
}
.overlay h3{
    padding-left: 10px;
    padding-right: 10px;
    text-align: center;
    font-size: 1rem;
    color: white;
}
h1{
    color: #b9e5c0;
}
.left-bg{
    position: relative;
    border-radius: 30px ;
    background-image: url('bg2.jpg');
    background-size: cover;
    background-position: center;
    -webkit-border-radius: 30px ;
    -moz-border-radius: 30px ;
    -ms-border-radius: 30px ;
    -o-border-radius: 30px ;
}
.right-area{
    padding-right: 4rem;
    padding-left: 4rem;
    padding-top: 30px;
    padding-bottom: 30px;
    
}
.btn2{
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 80px;
    border: 2px solid #87cda6;
    padding: 10px 20px;
    border-radius: 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
    transition: .3s all ease;
    -webkit-transition: .3s all ease;
    -moz-transition: .3s all ease;
    -ms-transition: .3s all ease;
    -o-transition: .3s all ease;
}
.btn2 i{
    font-size: 1.3em;
    color: #87cda6 ;
}
.btn1{
    background-color: #87cda6;
    color: #cff7d2;
    border-radius: 30px;
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    text-decoration: none;
    color: rgb(15, 15, 15);
    padding: 10px 30px;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    -ms-border-radius: 30px;
    -o-border-radius: 30px;
}
.btn1:hover{
    background-color: #87cda6;
    color: #cff7d2;
}
.btn2:hover{
    background-color: #87cda6;
}
.btn2:hover i{
    color: black;
}

.or{
    font-weight: 500;
    color: var(--color1);
    text-align: center;
}
.or::before{
    margin-left: 0px;
    margin-right: 20px;
}
.or::after{
    margin-right: 0px;
    margin-left: 20px;
}
.or::before, .or::after{
    content: "";
    display: inline-block;
    height: 2px;
    width: calc(50% - 30px) ;
    background-color: var(--color1);
    
}
input{
    background-color: transparent !important;
    border: 2px solid var(--color1) !important;
    color: var(--color1) !important;
    border-radius: 30px !important;
    width: 100%;
    border-radius: 30px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 10px 20px !important;

}
input::placeholder{
    color: rgba(135, 205, 166, 0.5) !important;
}
label{
    color: white;
    font-weight: 500;
}


.checkbox{
    display: flex;
    align-items: center;
    
}

.checkbox-container {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
}

.checkbox-container input[type="checkbox"] {
    display: none; 
}

.custom-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color1);
    border-radius: 4px;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: all 0.3s ease;
}

.custom-checkbox:hover {
    box-shadow: 0 0 8px rgba(135, 205, 166, 0.5) !important;
}

.custom-checkbox::after {
    content: '';
    width: 12px;
    height: 12px;
    background-color: var(--color1);
    display: none;
    border-radius: 2px;
}

.checkbox-container input[type="checkbox"]:checked + .custom-checkbox::after {
    display: block;
}

.sign-up{
    background-color: var(--color2);
    color: black;
    font-weight: 600;
    width: fit-content;
    border-radius: 30px;
    box-shadow: 0 0 8px rgba(135, 205, 166, 0.5) !important;
    border-radius: 30px;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 10px 50px !important;
    transition: .3s all ease;
    -webkit-transition: .3s all ease;
    -moz-transition: .3s all ease;
    -ms-transition: .3s all ease;
    -o-transition: .3s all ease;
}
.sign-up:hover{
    background-color: #87cda6;
}

.login-switch , .signup-switch{
    z-index: 10;
    cursor: pointer;
    font-weight: 600;
    color: black;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 10px solid #247972;
    background-color: white;
    border-radius: 50%;
    width: 80px;
    height: 80px;
    position: absolute;
    right: -40px;
    top: 55%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -moz-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    -ms-border-radius: 50%;
    -o-border-radius: 50%;
    transition: .3s all ease;
    -webkit-transition: .3s all ease;
    -moz-transition: .3s all ease;
    -ms-transition: .3s all ease;
    -o-transition: .3s all ease;
}
.login-switch:hover, .signup-switch:hover{
    color: white;
    border: 10px solid white;
    background-color: #247972;
}

.signup-switch{
    display: none;
    left: -40px !important;
}

.if-account {
    letter-spacing: 1px;
    position: absolute;
    right: -30px;
    top:10px;
    color: white;
    font-weight: 500;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: vertical-rl;
}
.if-dont-account{
    display: none;
    transform: rotate(180deg);
    letter-spacing: 1px;
    position: absolute;
    left: -30px;
    top:10px;
    color: white;
    font-weight: 500;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    -webkit-transform: rotate();
    -moz-transform: rotate();
    -ms-transform: rotate();
    -o-transform: rotate();
}
.reverse {
    transform: scaleX(-1);
}

.reverse > * {
    transform: scaleX(-1);
}
/* .left-bg, .right-area {
    transition: transform 0.4s ease; 
    width: 50%; 
}

.reverse .left-bg {
    transform: translateX(130%);

    -webkit-transform: translateX(130%);
    -moz-transform: translateX(130%);
    -ms-transform: translateX(130%);
    -o-transform: translateX(130%);
}

.reverse .right-area {
    transform: translateX(-70%);
    -webkit-transform: translateX(-70%);
    -moz-transform: translateX(-70%);
    -ms-transform: translateX(-70%);
    -o-transform: translateX(-70%);
} */

Login Form Javascript Code:

      const loginSwitch = document.querySelector(".login-switch");
      const signupSwitch = document.querySelector(".signup-switch");
      const loginContainer = document.querySelector(".login-container");
      const haveAccount = document.querySelector(".if-account");
      const ifDontAccount = document.querySelector(".if-dont-account");
      const highlight = document.querySelector(".highlight");
      const signupBtn = document.querySelector(".sign-up");
      const signUpPartForm = document.querySelector(".signup-part-form");

      loginSwitch.addEventListener("click", () => {
        loginContainer.classList.toggle("reverse");
        loginSwitch.style.display = "none";
        haveAccount.style.display = "none";
        ifDontAccount.style.display = "flex";
        signupSwitch.style.display = "flex";
        highlight.innerText = "Login Your Account";
        signupBtn.innerText = "Login";
        signUpPartForm.style.setProperty("display", "none", "important");
      });
      signupSwitch.addEventListener("click", () => {
        loginContainer.classList.toggle("reverse");
        loginSwitch.style.display = "flex";
        haveAccount.style.display = "block";
        ifDontAccount.style.display = "none";
        signupSwitch.style.display = "none";
        highlight.innerText = "Create Your Account";
        signupBtn.innerText = "Sign Up";
        signUpPartForm.style.setProperty("display", "flex", "important");
      });

Categorized in:

Yazılım,

Login Form with Modern UI and Animation using Bootstrap (Html and Css)

Why Is Design Important in Login Forms?

Code: Build Your Login Form

Login Form HTML Code:

Login Form CSS Code:

Login Form Javascript Code:

Password Generator with Javascript

Javascript Mastery: Questions, Challenges & Solutions

Leave a Reply Cancel reply

Press ESC to close

Why Is Design Important in Login Forms?

Code: Build Your Login Form

Login Form HTML Code:

Login Form CSS Code:

Login Form Javascript Code:

Share Article:

Password Generator with Javascript

Javascript Mastery: Questions, Challenges & Solutions

More in this CategoryYazılım

Leave a Reply Cancel reply