loginpage.html

<html>
<head>
    <title>Login page</title>
    <link rel="stylesheet" href="loginpagestyle.css">
</head>
<body>
    <div class="hero">
    <div class="form-box">
        <div class="button-box">
            <div id="btn"></div>
            <button type="button" class="toggle-btn" onclick="login()">Log In</button>
        </div>
        <div class="social-icons">
            <img src="login-reg-img/fb.png">
            <img src="login-reg-img/tw.png">
            <img src="login-reg-img/gp.png">
        </div>
        <form class="input-group">
            <input type="text" class="input-field" placeholder="User Id" required>
            <input type="text" class="input-field" placeholder="Enter Password" required>
            <input type="checkbox" class="chech-box"><span>Remember Password</span>
            <button type="submit" class="submit-btn">Log In</button>
        </form>
    </div>
    
    </div>
    <script>
        var x = document.getElementById("login");
        var z = document.getElementById("btn");

        function login(){
            x.style.left = "50px";
            y.style.left = "450px";
            z.style.left = "0px";
        }
    </script>
</body>
</html>