Bootstrap ile Modern Arayüz ve Animasyonlu Login Form (HTML ve CSS)

Günümüz dijital çağında, bir kullanıcının bir web sitesiyle ilk etkileşimi genellikle giriş sayfası üzerinden gerçekleşir. Bu deneyimi görsel olarak çekici, işlevsel ve erişilebilir kılmak oldukça önemlidir. Bu blog yazısında, modern bir arayüze sahip, odak artırıcı animasyonlarla zenginleştirilmiş bir giriş formu tasarlayacağız. Tamamen HTML ve CSS kullanılarak inşa edilen bu form, yazının sonunda hem kullanıcı dostu hem de SEO uyumlu bir giriş sayfasına sahip olmanızı sağlayacak.

Giriş Formlarında Tasarım Neden Önemlidir?

İyi tasarlanmış bir giriş formu:

Kullanıcı deneyimini iyileştirir.
Profesyonelliği ve güveni artırır.
Markanızın estetiğiyle uyum sağlar.
Kullanıcı etkileşimini artırabilir.

Modern giriş formumuz, etkili odak animasyonları ve hover efektleriyle zenginleştirilmiş, minimal ancak çekici bir tasarıma sahiptir.

Kod: Login Form

İşte modern login form için tam HTML ve CSS kodu.

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");
      });

Kategoriler:

Kod Rehberi,

Bootstrap ile Modern Arayüz ve Animasyonlu Login Form (HTML ve CSS)

Giriş Formlarında Tasarım Neden Önemlidir?

Kod: Login Form

Login Form HTML Code:

Login Form CSS Code:

Login Form Javascript Code:

10 Front-End Project Ideas Without Backend Development

Javascript ile Şifre Oluşturucu

Bir yanıt yazın Yanıtı iptal et

Kapatmak için ESC basınız.

Giriş Formlarında Tasarım Neden Önemlidir?

Kod: Login Form

Login Form HTML Code:

Login Form CSS Code:

Login Form Javascript Code:

İçeriği Paylaş:

10 Front-End Project Ideas Without Backend Development

Javascript ile Şifre Oluşturucu

Bu kategori için daha fazlasıKod Rehberi

Bir yanıt yazın Yanıtı iptal et