Button Default State-CodePudding

I am new to html, css and javascript. I have crafted login/registration button. Now it always starts highlighting register and showing the placeholders of register. However, I would like for it to display login contents and underlining login when I first running the file or clicking on the link. Could someone enlightens me on how I could set the button to begin on login instead of register?

//HTML
<div class="main">
            <div class="card">
                <div class="card-body">
                    <div class="card-body-top">
                        <button id="register" class="btn" name="register" onclick="register()" href="register.html">Register</button>
                        <button id="login" class="btn" name="login" onclick="login()" active>Login</button>
                        <div id="pointer-btn"></div>
                    </div>
                    <div class="card-body-login">
                        <form id="register-form">
                            <input class="input-form" type="email" placeholder="Enter your email:" required><br><br>
                            <input class="input-form" type="password" placeholder="Enter your password:" required><br><br>
                            <input class="input-form" type="text" placeholder="Enter your NRIC:" required><br><br>
                            <input class="submit-form" type="submit" value="REGISTER">
                        </form>
                        <form id="login-form">
                            <input class="input-form" type="email" placeholder="Enter your email:" required><br><br>
                            <input class="input-form" type="password" placeholder="Enter your password:" required><br><br><br>
                            <input class="submit-form" type="submit" value="LOGIN">
                        </form>
                        
                    </div>
                </div>
            </div>
        </div>
    </body>

//CSS
.clear{
    clear: both;
}

.main{
    width: 100%;
    height: 100vh;

}

.card{
    width: 400px;
    position: absolute;
    top: 50%;
    left: 19%;
    transform: translate(-50%,-50%);
}


.card-body{
    padding: 10px 0px;
    border-radius: 5px;
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.card-body-top{
    width: 100%;
    position: relative;
    
}

.card-body-top > .btn{
    border: 0;
    background-color: transparent;
    color: #848484;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 500;
    width: 180px;
    padding: 20px 0;
}

#register{
    color: #000;
}

#login{
    color: #848484;
}
/*.active_btn{
    color: #00ffc3!important;
}*/

#pointer-btn{
    position: absolute;
    bottom:1px;
    left: 30px;
    width: 120px;
    height: 2px;
    background-color: #e6d158;
    transition: 0.5s all ease;
}

.card-body-login{
    width: 100%;
    padding: 15px 20px;
    position: relative;
}

.card-body-login > #register-form{
    position: absolute;
    top: 30px;
    left: 25px;
    text-align: center;
    transition: 0.5s all ease;
}

.card-body-login > #login-form{
    position: absolute;
    top: 20px;
    left: 450px;
    text-align: center;
    transition: 0.5s all ease;
}

.input-form{
    border: none;
    background-color: transparent;
    color: #000;
    border-bottom: 1px solid #f5f4f3;
    width: 350px;
    padding: 15px 0px;
    font-size: 15px;
    letter-spacing: 1px;
    outline: none;
}

/* style placeholder*/
.input-form::-webkit-input-placeholder{
    color: black;
}

.submit-form{
    background-color: #c09318;    ;
    color: white;
    border: none;
    padding: 10px 147px;
    font-size: 15px;
    cursor: pointer;
    letter-spacing: 1px;
}

/* turned green from brown when hovered */
.submit-form:hover{
    background-color: green;
}

/* turned box-shadowed from underlined when hovered */
.input-form:hover{
    box-shadow: 0 0 1px 1px black;
}

// JS
var x = document.getElementById("login-form");
var y = document.getElementById("register-form");
var z = document.getElementById("pointer-btn");
var l = document.getElementById("login");
var r = document.getElementById("register");

        
function login(){
    y.style.left = "-450px";
    x.style.left = "25px";
    z.style.left = "215px";
    r.style.color = "#848484";
    l.style.color = "#000";
    
                    
}
        
function register(){
    y.style.left = "25px";
    x.style.left = "450px";
    z.style.left = "30px";
    r.style.color = "#000";
    l.style.color = "#848484";  

 }

CodePudding user response：

All you need to do is change your CSS style sheet. Try the following CSS styles.

.clear{
    clear: both;
}

.main{
    width: 100%;
    height: 100vh;

}

.card{
    width: 400px;
    position: absolute;
    top: 50%;
    left: 19%;
    transform: translate(-50%,-50%);
}


.card-body{
    padding: 10px 0px;
    border-radius: 5px;
    width: 100%;
    height: 350px;
    overflow: hidden;
}

.card-body-top{
    width: 100%;
    position: relative;
    
}

.card-body-top > .btn{
    border: 0;
    background-color: transparent;
    color: #848484;
    font-size: 16px;
    letter-spacing: 1px;
    font-weight: 500;
    width: 180px;
    padding: 20px 0;
}

#register{
    color: #848484;
}

#login{
    color: #000;
}
/*.active_btn{
    color: #00ffc3!important;
}*/

#pointer-btn{
    position: absolute;
    bottom:1px;
    left: 215px;
    width: 120px;
    height: 2px;
    background-color: #e6d158;
    transition: 0.5s all ease;
}

.card-body-login{
    width: 100%;
    padding: 15px 20px;
    position: relative;
}

.card-body-login > #register-form{
    position: absolute;
    top: 30px;
    left: -450px;
    text-align: center;
    transition: 0.5s all ease;
}

.card-body-login > #login-form{
    position: absolute;
    top: 20px;
    left: 25px;
    text-align: center;
    transition: 0.5s all ease;
}

.input-form{
    border: none;
    background-color: transparent;
    color: #000;
    border-bottom: 1px solid #f5f4f3;
    width: 350px;
    padding: 15px 0px;
    font-size: 15px;
    letter-spacing: 1px;
    outline: none;
}

/* style placeholder*/
.input-form::-webkit-input-placeholder{
    color: black;
}

.submit-form{
    background-color: #c09318;    ;
    color: white;
    border: none;
    padding: 10px 147px;
    font-size: 15px;
    cursor: pointer;
    letter-spacing: 1px;
}

/* turned green from brown when hovered */
.submit-form:hover{
    background-color: green;
}

/* turned box-shadowed from underlined when hovered */
.input-form:hover{
    box-shadow: 0 0 1px 1px black;
}

CodePudding user response：

The easiest way would be to add login() at the end of your script.

The better way is to use a css style called transform: translate() on .card-body-login with overflow: hidden