Embossed Login / Sign Up with Validation | HTML, CSS & JavaScript

<div class="slider">
        <div class="slider-login">
          <div class="slider-content">
            <span class="badge">Welcome Back</span>
            <h2>Hello, Friend!</h2>
            <p>Enter your details and start your embossed UI journey with our modern sign up experience.</p>
            <label for="toggle" class="switch-btn">Create Account</label>
          </div>
        </div>

<div class="slider-signup">
          <div class="slider-content">
            <span class="badge">Join Us</span>
            <h2>Already have an account?</h2>
            <p>Sign in to continue with the smooth embossed slide animation and premium login interface.</p>
            <label for="toggle" class="switch-btn">Sign In</label>
          </div>
        </div>
      </div>

<div class="panel login-panel">
          <div class="form-box">
            <h2 class="form-title">Sign In</h2>
            <p class="form-subtitle">Login to access your dashboard</p>

<div class="message" id="loginMessage">
              <div class="icon">!</div>
              <div class="text">
                <strong>Alert</strong>
                <span>Message appears here.</span>
              </div>
            </div>

<div class="options">
                <label class="remember">
                  <input type="checkbox">
                  <span>Remember me</span>
                </label>
                <a href="#">Forgot password?</a>
              </div>

<button type="submit" class="submit-btn">Login Now</button>
            </form>

<div class="socials">
              <p>or continue with</p>
              <div class="social-icons">
                <a href="#">G</a>
                <a href="#">f</a>
                <a href="#">in</a>
              </div>
            </div>
          </div>
        </div>

<div class="panel signup-panel">
          <div class="form-box">
            <h2 class="form-title">Create Account</h2>
            <p class="form-subtitle">Sign up and begin your experience</p>

<div class="message" id="signupMessage">
              <div class="icon">!</div>
              <div class="text">
                <strong>Alert</strong>
                <span>Message appears here.</span>
              </div>
            </div>

<div class="options" style="justify-content:flex-start;">
                <label class="remember">
                  <input type="checkbox" id="termsCheck">
                  <span>I agree to the terms & conditions</span>
                </label>
              </div>

<button type="submit" class="submit-btn">Create Account</button>
            </form>

</div>
    </div>
  </div>

*{
      margin:0;
      padding:0;
      box-sizing:border-box;
      font-family:"Poppins",sans-serif;
    }

:root{
      --bg:#dde4ec;
      --card:#e7edf5;
      --shadow-dark:#b8c0cc;
      --shadow-light:#ffffff;
      --text:#2f3c4d;
      --muted:#6b7787;
      --primary:#5a7cff;
      --primary-dark:#3f5de0;
      --success:#1fbf75;
      --danger:#ef4d67;
      --warning:#ffb347;
    }

body{
      min-height:100vh;
      display:flex;

background:
        radial-gradient(circle at top left, #eef3f8 0%, #dde4ec 45%, #d4dce6 100%);
      padding:24px;
      overflow:hidden;
      scale: 0.8;
      margin-bottom: 60px;
      scale:0.6
    }

.scene{
      width:100%;
      max-width:1000px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

.wrapper{
      position:relative;
      width:100%;
      max-width:1000px;
      min-height:600px;
      border-radius:36px;
      background:var(--card);
      box-shadow:
        18px 18px 35px var(--shadow-dark),
        -18px -18px 35px var(--shadow-light),
        inset 1px 1px 0 rgba(255,255,255,.7),
        inset -1px -1px 0 rgba(0,0,0,.02);
      overflow:hidden;
    }

#toggle{
      display:none;
    }

/* Sliding embossed panel */
    .slider{
      position:absolute;
      top:20px;
      left:20px;
      width:calc(50% - 20px);
      height:calc(100% - 40px);
      border-radius:30px;
      background:linear-gradient(145deg, #5f80ff, #4969ef);
      box-shadow:
        inset 8px 8px 20px rgba(255,255,255,.12),
        inset -10px -10px 25px rgba(0,0,0,.18),
        12px 12px 30px rgba(88,109,180,.25);
      z-index:3;
      transition:all .7s cubic-bezier(.77,0,.18,1);
      color:#fff;
      overflow:hidden;
    }

#toggle:checked ~ .slider{
      left:calc(50%);
    }

.slider-login,
    .slider-signup{
      position:absolute;
      inset:0;
      display:flex;
      align-items:center;
      justify-content:center;
      padding:40px;
      transition:.5s ease;
    }

.slider-login{
      opacity:1;
      transform:translateY(0);
      pointer-events:auto;
    }

.slider-signup{
      opacity:0;
      transform:translateY(20px);
      pointer-events:none;
    }

#toggle:checked ~ .slider .slider-login{
      opacity:0;
      transform:translateY(-20px);
      pointer-events:none;
    }

#toggle:checked ~ .slider .slider-signup{
      opacity:1;
      transform:translateY(0);
      pointer-events:auto;
    }

.slider-content{
      text-align:center;
      max-width:320px;
      animation:floatText 3.5s ease-in-out infinite;
    }

@keyframes floatText{
      0%,100%{transform:translateY(0);}
      50%{transform:translateY(-6px);}
    }

.badge{
      display:inline-block;
      padding:8px 14px;
      border-radius:30px;
      background:rgba(255,255,255,.15);
      border:1px solid rgba(255,255,255,.18);
      font-size:.82rem;
      margin-bottom:16px;
      letter-spacing:.4px;
    }

.slider-content h2{
      font-size:2rem;
      margin-bottom:14px;
      font-weight:700;
    }

.slider-content p{
      font-size:.98rem;
      line-height:1.7;
      opacity:.95;
      margin-bottom:24px;
    }

.switch-btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width:160px;
      height:52px;
      padding:0 24px;
      border-radius:50px;
      color:#fff;
      cursor:pointer;
      font-weight:600;
      border:1px solid rgba(255,255,255,.2);
      box-shadow:
        8px 8px 20px rgba(0,0,0,.15),
        inset 1px 1px 0 rgba(255,255,255,.2);
      background:rgba(255,255,255,.08);
      backdrop-filter: blur(5px);
      transition:.35s ease;
      user-select:none;
    }

.switch-btn:hover{
      transform:translateY(-2px);
      background:rgba(255,255,255,.14);
    }

.forms{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns:1fr 1fr;
      min-height:650px;
    }

.panel{
      padding:58px 48px;
      display:flex;
      align-items:center;
      justify-content:center;
    }

.form-box{
      width:100%;
      max-width:360px;
      transition:all .6s ease;
    }

.form-title{
      font-size:2rem;
      color:var(--text);
      margin-bottom:10px;
      text-align:center;
      font-weight:700;
    }

.form-subtitle{
      text-align:center;
      color:var(--muted);
      margin-bottom:24px;
      font-size:.95rem;
    }

.input-group{
      margin-bottom:14px;
      position:relative;
    }

.input{
      width:100%;
      height:56px;
      border:none;
      outline:none;
      border-radius:18px;
      padding:0 18px;
      font-size:.96rem;
      color:var(--text);
      background:var(--card);
      box-shadow:
        inset 8px 8px 16px rgba(184,192,204,.8),
        inset -8px -8px 16px rgba(255,255,255,.95);
      transition:.3s ease;
    }

.input::placeholder{
      color:#8b97a7;
    }

.input:focus{
      box-shadow:
        inset 5px 5px 10px rgba(184,192,204,.9),
        inset -5px -5px 10px rgba(255,255,255,1),
        0 0 0 3px rgba(90,124,255,.12);
    }

.input.error{
      box-shadow:
        inset 5px 5px 10px rgba(239,77,103,.15),
        inset -5px -5px 10px rgba(255,255,255,1),
        0 0 0 3px rgba(239,77,103,.15);
    }

.input.success{
      box-shadow:
        inset 5px 5px 10px rgba(31,191,117,.15),
        inset -5px -5px 10px rgba(255,255,255,1),
        0 0 0 3px rgba(31,191,117,.15);
    }

.row{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:14px;
    }

.options{
      display:flex;
      justify-content:space-between;
      align-items:center;
      gap:12px;
      margin:8px 0 20px;
      font-size:.9rem;
      color:var(--muted);
      flex-wrap:wrap;
    }

.remember{
      display:flex;
      align-items:center;
      gap:8px;
      cursor:pointer;
    }

.remember input{
      accent-color:var(--primary);
      width:16px;
      height:16px;
    }

.options a{
      color:var(--primary-dark);
      text-decoration:none;
      font-weight:600;
    }

.submit-btn{
      width:100%;
      height:56px;
      border:none;
      outline:none;
      border-radius:18px;
      cursor:pointer;
      color:#fff;
      font-size:1rem;
      font-weight:700;
      background:linear-gradient(145deg, var(--primary), var(--primary-dark));
      box-shadow:
        10px 10px 20px rgba(162,173,189,.7),
        -8px -8px 18px rgba(255,255,255,.85),
        inset 1px 1px 0 rgba(255,255,255,.2);
      transition:.35s ease;
    }

.submit-btn:hover{
      transform:translateY(-2px);
    }

.socials{
      margin-top:20px;
      text-align:center;
    }

.socials p{
      color:var(--muted);
      font-size:.9rem;
      margin-bottom:14px;
    }

.social-icons{
      display:flex;
      justify-content:center;
      gap:14px;
    }

.social-icons a{
      width:48px;
      height:48px;
      border-radius:16px;
      display:flex;
      align-items:center;
      justify-content:center;
      text-decoration:none;
      color:var(--text);
      font-weight:700;
      background:var(--card);
      box-shadow:
        8px 8px 16px rgba(184,192,204,.8),
        -8px -8px 16px rgba(255,255,255,.95);
      transition:.3s ease;
    }

.social-icons a:hover{
      transform:translateY(-3px);
      color:var(--primary);
    }

/* Animated Message Box */
    .message{
      display:flex;
      align-items:center;
      gap:12px;
      min-height:58px;
      padding:14px 16px;
      border-radius:18px;
      margin-bottom:18px;
      font-size:.92rem;
      line-height:1.5;
      opacity:0;
      transform:translateY(-12px) scale(.98);
      pointer-events:none;
      transition:.4s ease;
      background:var(--card);
      box-shadow:
        8px 8px 16px rgba(184,192,204,.65),
        -8px -8px 16px rgba(255,255,255,.95);
    }

.message.show{
      opacity:1;
      transform:translateY(0) scale(1);
      pointer-events:auto;
    }

.message .icon{
      width:34px;
      height:34px;
      border-radius:12px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-weight:700;
      flex-shrink:0;
      box-shadow:
        inset 3px 3px 8px rgba(255,255,255,.35),
        inset -4px -4px 10px rgba(0,0,0,.08);
    }

.message .text strong{
      display:block;
      margin-bottom:2px;
      font-size:.95rem;
    }

.message.error{
      border-left:5px solid var(--danger);
    }

.message.error .icon{
      background:rgba(239,77,103,.15);
      color:var(--danger);
    }

.message.error .text strong{
      color:var(--danger);
    }

.message.success{
      border-left:5px solid var(--success);
    }

.message.success .icon{
      background:rgba(31,191,117,.15);
      color:var(--success);
    }

.message.success .text strong{
      color:var(--success);
    }

/* Default state: signup active, login faded */
    .login-panel .form-box{
      opacity:.25;
      transform:translateX(18px) scale(.96);
      pointer-events:none;
    }

.signup-panel .form-box{
      opacity:1;
      transform:translateX(0) scale(1);
      pointer-events:auto;
    }

/* Toggle state: login active */
    #toggle:checked ~ .forms .signup-panel .form-box{
      opacity:.25;
      transform:translateX(-18px) scale(.96);
      pointer-events:none;
    }

#toggle:checked ~ .forms .login-panel .form-box{
      opacity:1;
      transform:translateX(0) scale(1);
      pointer-events:auto;
    }

.wrapper::before,
    .wrapper::after{
      content:"";
      position:absolute;
      border-radius:50%;
      filter:blur(10px);
      z-index:0;
      opacity:.55;
    }

.wrapper::before{
      width:220px;
      height:220px;
      background:rgba(90,124,255,.12);
      top:-70px;
      right:120px;
    }

.wrapper::after{
      width:180px;
      height:180px;
      background:rgba(39,196,152,.12);
      bottom:-50px;
      left:140px;
    }

const loginForm = document.getElementById("loginForm");
    const signupForm = document.getElementById("signupForm");

const loginMessage = document.getElementById("loginMessage");
    const signupMessage = document.getElementById("signupMessage");

const loginEmail = document.getElementById("loginEmail");
    const loginPassword = document.getElementById("loginPassword");

const firstName = document.getElementById("firstName");
    const lastName = document.getElementById("lastName");
    const signupEmail = document.getElementById("signupEmail");
    const signupPassword = document.getElementById("signupPassword");
    const confirmPassword = document.getElementById("confirmPassword");
    const termsCheck = document.getElementById("termsCheck");

function isValidEmail(email){
      return /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(email);
    }

function resetInputs(inputs){
      inputs.forEach(input=>{
        input.classList.remove("error","success");
      });
    }

function setInputState(input, state){
      input.classList.remove("error","success");
      if(state) input.classList.add(state);
    }

function showMessage(box, type, title, text){
      box.className = "message " + type + " show";
      box.querySelector(".icon").textContent = type === "success" ? "✓" : "!";
      box.querySelector("strong").textContent = title;
      box.querySelector("span").textContent = text;
    }

/* LOGIN VALIDATION */
    loginForm.addEventListener("submit", function(e){
      e.preventDefault();

const inputs = [loginEmail, loginPassword];
      resetInputs(inputs);

let valid = true;

if(loginEmail.value.trim() === ""){
        setInputState(loginEmail, "error");
        valid = false;
      }else if(!isValidEmail(loginEmail.value.trim())){
        setInputState(loginEmail, "error");
        valid = false;
      }else{
        setInputState(loginEmail, "success");
      }

if(loginPassword.value.trim() === ""){
        setInputState(loginPassword, "error");
        valid = false;
      }else if(loginPassword.value.trim().length < 6){
        setInputState(loginPassword, "error");
        valid = false;
      }else{
        setInputState(loginPassword, "success");
      }

if(!valid){
        showMessage(
          loginMessage,
          "error",
          "Login Failed",
          "Please enter a valid email and a password with at least 6 characters."
        );
      }else{
        showMessage(
          loginMessage,
          "success",
          "Login Successful",
          "Welcome back! Your login validation has been completed successfully."
        );
        loginForm.reset();
        setTimeout(()=>resetInputs(inputs),300);
      }
    });

/* SIGNUP VALIDATION */
    signupForm.addEventListener("submit", function(e){
      e.preventDefault();

const inputs = [firstName, lastName, signupEmail, signupPassword, confirmPassword];
      resetInputs(inputs);

let valid = true;

if(firstName.value.trim() === ""){
        setInputState(firstName, "error");
        valid = false;
      }else{
        setInputState(firstName, "success");
      }

if(lastName.value.trim() === ""){
        setInputState(lastName, "error");
        valid = false;
      }else{
        setInputState(lastName, "success");
      }

if(signupEmail.value.trim() === "" || !isValidEmail(signupEmail.value.trim())){
        setInputState(signupEmail, "error");
        valid = false;
      }else{
        setInputState(signupEmail, "success");
      }

if(signupPassword.value.trim().length < 6){
        setInputState(signupPassword, "error");
        valid = false;
      }else{
        setInputState(signupPassword, "success");
      }

if(confirmPassword.value.trim() === "" || confirmPassword.value !== signupPassword.value){
        setInputState(confirmPassword, "error");
        valid = false;
      }else{
        setInputState(confirmPassword, "success");
      }

if(!termsCheck.checked){
        valid = false;
      }

if(!valid){
        showMessage(
          signupMessage,
          "error",
          "Sign Up Failed",
          "Please fill all fields correctly, match passwords, and accept the terms & conditions."
        );
      }else{
        showMessage(
          signupMessage,
          "success",
          "Account Created",
          "Your account has been created successfully. You can now sign in."
        );
        signupForm.reset();
        setTimeout(()=>resetInputs(inputs),300);
      }
    });

- Embossed Login / Sign Up with Validation

Live Preview