top of page

Here Login & Sign up

HTML css javascript Login Animation

Here Login & Sign up

<!DOCTYPE html>

<html lang="en">

<head>

    <link rel="stylesheet" href="hero.css">

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Hero Login page</title>

</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()">Login</button>

                <button type="button" class="toggle-btn" onclick="register()" >Register</button>

            </div>

            <div class="social-icons">

                <img src="fb.png" alt="">

                <img src="tw.png" alt="">

                <img src="gp.png" alt="">

            </div>

            <form action="" id="login" class="input-group">

                <input type="email" class="input-field" placeholder="User Id" required>

                <input type="password" class="input-field" placeholder="Enter password" required>

                <input type="checkbox" class="chech-box"> <span>I agree to the term & conditions</span>

                <button type="submit" class="submit-btn">Register</button>

            </form>


            <form action="" id="register" class="input-group">

                <input type="text" class="input-field" placeholder="First Name" required>

                <input type="text" class="input-field" placeholder="Last Name" required>

                <input type="email" class="input-field" placeholder="Email" required>

                <input type="password" class="input-field" placeholder="Enter password" required>

                <input type="checkbox" class="chech-box"> <span>I agree to the term & conditions</span>

                <button type="submit" class="submit-btn">Register</button>

            </form>

        </div>

       

    </div>


    

    <script>

var x = document.getElementById("login");

var y = document.getElementById("register");

var Z = document.getElementById("btn");


function register(){

    x.style.left = "-400px";

    y.style.left = "50px";

    Z.style.left ="110px";

}

function login(){

    x.style.left = "50px";

    y.style.left = "450px";

    Z.style.left ="0";

}


    </script>


</body>

</html>




Star CSS

*{

    margin: 0;

    padding: 0;

    font-family: sans-serif;

}

.hero{

    height: 100%;

    width: 100%;

    background: #fff;

    background-position:center;

    background-size: cover;

    position: absolute; 

}

.form-box

{

   width: 380px;

   height: 480px;

   position: relative;

   margin: 6% auto;

   background: #fff;

   padding: 5px;

   box-shadow:0 0 20px 9px #ff61241f;

   border-radius: 30px;

   overflow: hidden; 

}

.button-box

{

width: 220px;

margin: 35px auto;

position: relative;

box-shadow: 0 0 20px 9px #ff61241f;

border-radius: 30px;


}

.toggle-btn

{

    padding: 10px 30px;

    cursor: pointer;

    background: transparent;

    border: 0;

    outline: none;

    position: relative;


}

#btn

{

    top: 0;

    left: 0;

    position: absolute;

    width: 110px;

    height: 100%;

    background: linear-gradient(to right, #ff105f,#ffad06);

    border-radius: 30px;

    transition: .5s;

}

.social-icons

{

  margin: 30px auto;

  text-align: center;  

}

.social-icons img

{

    width: 30px;

    margin: 0 12px;

    box-shadow: 0 0 20px 0 #7f7f7f3d;

    cursor: pointer;

    border-radius: 50%;


}


.input-group

{

    top: 180px;

    position: absolute;

    width: 280px;

    transition: .5s;

}

.input-field

{

    width: 100%;

    padding: 10px 0;

    margin: 5px 0;

    border-left: 0;

    border-top: 0;

    border-right: 0;

    border-bottom: 1px solid #999;

}

.input-field:hover

{

    width: 100%;

    padding: 10px 0;

    margin: 5px 0;

    border-left: 0;

    border-top: 0;

    border-right: 0;

    border-bottom: 1px solid #ea7f04;

}


.input-field :focus

{

    width: 100%;

    padding: 10px 0;

    margin: 5px 0;

    border-left: 0;

    border-top: 0;

    border-right: 0;

    border-bottom: 1px solid #0aac05;

}



.submit-btn{

    width: 85%;

    padding: 10px 30px;

    cursor: pointer;

    display: block;

    margin: auto;

    background: linear-gradient(to right, #ff105f,#ffad06);

    border: 0;

    outline: none;

    border-radius: 30px;

}

.chech-box

{

    margin: 30px 10px 30px 0;

}

span

{

    color: #777;

    font-size: 12px;

    bottom: 68px;

    position: absolute;

}

#login

{

    left: 50px;

}


#register

{

    left: 450px;

}












html, css, java

bottom of page