css animated login form

byNIKS •
0

CSS animated login form


In this code, we've created a simple login form with a username input, a password input, and a login button. The form is contained within a div with the class .login-form, which has a white background, a padding of 30 pixels, and a border radius of 10 pixels.

The slide-in animation is applied to the .login-form element, causing it to slide in from the top when the page loads. The animation uses the from and to keywords to define the starting and ending states of the animation, and the opacity and transform properties to specify the animation effects.

We've also added some basic styles to the input fields and buttons, including padding, margin, border, border radius, and box-shadow. The button has a green background color, white text color, and a hover effect that darkens the background color slightly.

Source Code For Css Animated Login Form


HTML :

<div class="login-box">
  <h2>Login</h2>
    <form>
        <div class="user-box">
        <input type="text" name="" required="">
        <label>Username</label>
        </div>
        <div class="user-box">
        <input type="password" name="" required="">
        <label>Password</label>
        </div>
        <a href="#">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        Submit
        </a>
    </form>
  </div>

CSS :

  <style>
            html {
            height: 100%;
            }
            body {
            margin:0;
            padding:0;
            font-family: sans-serif;
            background: linear-gradient(#141e30, #243b55);
            }

            .login-box {
            position: absolute;
            top: 50%;
            left: 50%;
            width: 400px;
            padding: 40px;
            transform: translate(-50%, -50%);
            background: rgba(0,0,0,.5);
            box-sizing: border-box;
            box-shadow: 0 15px 25px rgba(0,0,0,.6);
            border-radius: 10px;
            }

            .login-box h2 {
            margin: 0 0 30px;
            padding: 0;
            color: #fff;
            text-align: center;
            }

            .login-box .user-box {
            position: relative;
            }

            .login-box .user-box input {
            width: 100%;
            padding: 10px 0;
            font-size: 16px;
            color: #fff;
            margin-bottom: 30px;
            border: none;
            border-bottom: 1px solid #fff;
            outline: none;
            background: transparent;
            }
            .login-box .user-box label {
            position: absolute;
            top:0;
            left: 0;
            padding: 10px 0;
            font-size: 16px;
            color: #fff;
            pointer-events: none;
            transition: .5s;
            }

            .login-box .user-box input:focus ~ label,
            .login-box .user-box input:valid ~ label {
            top: -20px;
            left: 0;
            color: #03e9f4;
            font-size: 12px;
            }

            .login-box form a {
            position: relative;
            display: inline-block;
            padding: 10px 20px;
            color: #03e9f4;
            font-size: 16px;
            text-decoration: none;
            text-transform: uppercase;
            overflow: hidden;
            transition: .5s;
            margin-top: 40px;
            letter-spacing: 4px
            }

            .login-box a:hover {
            background: #03e9f4;
            color: #fff;
            border-radius: 5px;
            box-shadow: 0 0 5px #03e9f4,
                        0 0 25px #03e9f4,
                        0 0 50px #03e9f4,
                        0 0 100px #03e9f4;
            }

            .login-box a span {
            position: absolute;
            display: block;
            }

            .login-box a span:nth-child(1) {
            top: 0;
            left: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(90deg, transparent, #03e9f4);
            animation: btn-anim1 1s linear infinite;
            }

            @keyframes btn-anim1 {
            0% {
                left: -100%;
            }
            50%,100% {
                left: 100%;
            }
            }

            .login-box a span:nth-child(2) {
            top: -100%;
            right: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(180deg, transparent, #03e9f4);
            animation: btn-anim2 1s linear infinite;
            animation-delay: .25s
            }

            @keyframes btn-anim2 {
            0% {
                top: -100%;
            }
            50%,100% {
                top: 100%;
            }
            }

            .login-box a span:nth-child(3) {
            bottom: 0;
            right: -100%;
            width: 100%;
            height: 2px;
            background: linear-gradient(270deg, transparent, #03e9f4);
            animation: btn-anim3 1s linear infinite;
            animation-delay: .5s
            }

            @keyframes btn-anim3 {
            0% {
                right: -100%;
            }
            50%,100% {
                right: 100%;
            }
            }

            .login-box a span:nth-child(4) {
            bottom: -100%;
            left: 0;
            width: 2px;
            height: 100%;
            background: linear-gradient(360deg, transparent, #03e9f4);
            animation: btn-anim4 1s linear infinite;
            animation-delay: .75s
            }

            @keyframes btn-anim4 {
            0% {
                bottom: -100%;
            }
            50%,100% {
                bottom: 100%;
            }
            }
        </style> 


Tags:

Post a Comment

DO NOT ENTER ANY SPAM IN THE COMMENT BOX

Previous Post Next Post