Cara Membuat Form Login mirip Epic Games Menggunakan CSS jQuery

Cara Membuat Form Login mirip Epic Games Menggunakan CSS Jquery

HobbyTekno - Selamat datang, Kali ini Admin akan memberikan Tutorial Cara Membuat Pricing List yang Responsive dan juga keren, Langsung saja berikut langkah-langkahnya :

Langkah Membuat Form Login mirip Epic Games Menggunakan CSS Jquery


1. Salin code berikut ke Code Editor anda, lalu simpan sebagai file .html , misalnya : index.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="https://fonts.googleapis.com/css?family=Hind&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script>
  </head>
  <body>
    <div class="login-form">
      <div class="logo"><img src="images/logo.png" alt=""></div>

      <div class="social-media">
        <button class="fb"><img src="images/fb.png" alt=""></button>
        <button class="google"><img src="images/google.png" alt=""></button>
        <button class="ps"><img src="images/ps.png" alt=""></button>
        <button class="xbox"><img src="images/xbox.png" alt=""></button>
        <button class="switch"><img src="images/switch.png" alt=""></button>
      </div>

      <h6>Sign In</h6>

      <form action="">
        <div class="textbox">
          <input type="text" placeholder="Username Or Email">
          <span class="check-message hidden">Required</span>
        </div>

        <div class="textbox">
          <input type="password" placeholder="Password">
          <span class="check-message hidden">Required</span>
        </div>

        <div class="options">
          <label class="remember-me">
            <span class="checkbox">
              <input type="checkbox">
              <span class="checked"></span>
            </span>
            Remember me
          </label>

          <a href="#">Forgot Your Password</a>
        </div>

        <input type="submit" value="Log In Now" class="login-btn" disabled>
        <div class="privacy-link">
          <a href="#">Privacy Policy</a>
        </div>
      </form>

      <div class="dont-have-account">
        Don't have an Epic Games account?
        <a href="#">Sign Up</a>
      </div>
    </div>

    <script type="text/javascript">
      $(".textbox input").focusout(function(){
        if($(this).val() == ""){
          $(this).siblings().removeClass("hidden");
          $(this).css("background","#554343");
        }else{
          $(this).siblings().addClass("hidden");
          $(this).css("background","#484848");
        }
      });

      $(".textbox input").keyup(function(){
        var inputs = $(".textbox input");
        if(inputs[0].value != "" && inputs[1].value){
          $(".login-btn").attr("disabled",false);
          $(".login-btn").addClass("active");
        }else{
          $(".login-btn").attr("disabled",true);
          $(".login-btn").removeClass("active");
        }
      });
    </script>
  </body>
</html>
2. Lalu salin lagi code CSS berikut, simpan sebagai style.css
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "hind",sans-serif;
  text-decoration: none;
}

body{
  background: #121212;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-form{
  width: 470px;
  background: #202020;
  padding: 30px 60px;
}

.logo{
  height: 50px;
  text-align: center;
}

.logo img{
  height: 50px;
}

.social-media{
  display: flex;
  margin: 30px 0;
}

.social-media button{
  height: 50px;
  width: 100px;
  margin-right: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  transition: .3s linear;
}

.social-media button:last-child{
  margin: 0;
}

.social-media button img{
  width: 20px;
}

.fb{
  background: #4267b2;
}

.google{
  background: #fff;
}

.ps{
  background: #02b3e8;
}

.xbox{
  background: #107c10;
}

.switch{
  background: #e60012;
}

.social-media button:hover {
  opacity: .7;
}

.login-form h6{
  color: #f1f1f1;
  font-size: 15px;
  text-transform: uppercase;
  font-weight: 500;
}

.textbox{
  width: 100%;
  height: 50px;
  position: relative;
  margin-top: 15px;
}

.textbox input{
  width: 100%;
  height: 50px;
  border: none;
  background: #2b2b2b;
  padding: 0 15px;
  font-size: 16px;
  outline: none;
  color: #f4f4f4;
}

.textbox input:focus{
  background: #484848 !important;
}

.check-message{
  position: absolute;
  top: 50%;
  right: 10px;
  color: #fff;
  text-transform: uppercase;
  transform: translateY(-50%);
}

.textbox input:focus + .check-message{
  display: none;
}

.options{
  margin-top: 15px;
  color: #f4f4f480;
  overflow: hidden;
  font-size: 14px;
}

.remember-me{
  float: left;
  display: flex;
  align-items: center;
  cursor: pointer;
}

.checkbox{
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #484848;
  margin-right: 15px;
  position: relative;
}

.checkbox input{
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}

.checked{
  position: absolute;
  left: 8px;
  top: 4px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 1px 1px 0;
  transform: rotate(45deg);
  display: none;
}

.checkbox input:checked + .checked{
  display: block;
}

.options a{
  color: #f4f4f480;
  font-size: 14px;
  float: right;
}

.login-btn{
  width: 100%;
  height: 50px;
  margin-top: 30px;
  background: #191919;
  border: none;
  outline: none;
  cursor: pointer;
  text-transform: uppercase;
  font-weight: 700;
  transition: .3s linear;
}

.login-btn.active{
  background: #037bee;
  color: #fff;
}

.login-btn.active:hover{
  opacity: .7;
}

.hidden{
  display: none;
}

.privacy-link{
  text-align: center;
  margin-top: 35px;
}

.privacy-link a{
  color: #f1f1f1;
  font-size: 14px;
}

.dont-have-account{
  font-size: 14px;
  text-align: center;
  color: #f4f4f480;
  margin: 20px 0;
}

.dont-have-account a{
  color: #f1f1f1;
}

@media screen and (max-width:470px) {
  body{
    background: #202020;
  }

  .login-form{
    width: 100%;
    padding: 0 15px;
  }
}
3. Selesai, Login Form ini sangat mirip dengan milik Epic Games.

Untuk DEMO silahkan klik link dibawah ini :
Demo

Sekian Cara Membuat Form Login mirip Epic Games Menggunakan CSS jQuery, semoga postingan Admin kali ini bermanfaat untuk anda. Jika ada kendala tanyakan saja pada komentar

No comments for "Cara Membuat Form Login mirip Epic Games Menggunakan CSS jQuery"