Unable to load the content

Please attempt to reload the page or alternatively, try accessing it using a different browser.

Enhance Your Website's Aesthetics with Stylish Login Signup Form

bySmart UI Studio Published:

In the realm of web development, the gateway to engaging user experiences often begins with the login/signup forms. Today, let's delve into a sleek and modern approach to user authentication with HTML, CSS and JS. 

Enhance-Your-Website's-Aesthetics-with-Stylish-Login-Signup-Form

Must Read: Interactive Quiz Web App using HTML CSS JavaScript Project | With Levels

Whether you're building a website or enhancing an existing one, these aesthetically pleasing forms not only ensure a secure user login but also provide a seamless signup process. Join me as we explore the intricacies of the code and design that make these forms both functional and visually appealing.

<div id="main-container">
        <div class="form-container">
            <div class="login-form">
                <div class="title">LOGIN</div>
                <form>
                    <div class="field">
                        <input type="email" id="email-address" placeholder=" " required autocomplete="on">
                        <label for="email-address">Email</label>
                        <i class="fa fa-envelope"></i>
                    </div>

                    <div class="field">
                        <input type="password" id="create-pass" required placeholder=" " autocomplete="on">
                        <label for="create-pass">Password</label>
                        <i class="fa fa-lock"></i>
                    </div>

                    <section>
                        <label for="remember"><input type="checkbox" id="remember">Remember Me</label>
                        <a href="#">Forget Password?</a>
                    </section>

                    <button class="login-btn">Login</button>
                </form>

                <div class="bottom">
                    <div class="other">
                        <div class="separator">Or</div>
                        <div class="alternatives">
                            <a href="#"><span class="fab fa-google"></span></a>
                            <a href="#"><span class="fab fa-dropbox"></span></a>
                            <a href="#"><span class="fab fa-github"></span></a>
                            <a href="#"><span class="fab fa-microsoft"></span></a>
                            <a href="#"><span class="fab fa-linkedin"></span></a>
                        </div>
                    </div>
                    <div>Don't have an Account?&nbsp;<a class="signup-switch" onclick="swapPos(this)">Sign up</a></div>
                </div>
            </div>
            <div class="signup-form">
                <div class="title">SIGN UP</div>
                <form>
                    <div class="field">
                        <input type="text" id="name" placeholder=" " required>
                        <label for="name">Name</label>
                        <i class="fa fa-user"></i>
                    </div>

                    <div class="field">
                        <input type="email" id="user-email" placeholder=" " required autocomplete="on">
                        <label for="user-email">Email</label>
                        <i class="fa fa-envelope"></i>
                    </div>

                    <div class="field">
                        <input type="password" id="password" required placeholder=" " autocomplete="off">
                        <label for="password">Password</label>
                        <i class="fa fa-lock"></i>
                    </div>

                    <div class="field">
                        <input type="password" id="confirm-pass" required placeholder=" " autocomplete="off">
                        <label for="confirm-pass">Confirm Password</label>
                        <i class="fa fa-lock"></i>
                    </div>

                    <section>
                        <label for="agree"><input type="checkbox" id="agree">I agree to all&nbsp;<a href="#">Terms &
                                Conditions</a></label>
                    </section>
                    <button class="signup-btn">Register</button>
                </form>

                <div class="bottom">
                    <span>Already Registered?&nbsp;<a class="login-switch" onclick="swapPos(this)">Login</a></span>
                </div>
            </div>
        </div>
</div>
  • The code is contained within a main-container div element.
  • Inside main-container, there's a form-container that holds both the login and signup forms.
  • The login form has a class login-form, and the signup form has a class signup-form. These forms are placed one above the other, and only one is visible at a time.

Login Form

  • The login form has a title "LOGIN."
  • It contains an HTML form element with an action attribute set to #, which means the form doesn't have a specific action URL.
  • Inside the form, there are two input fields for email and password.
  • Each input field is wrapped in a field div, consisting of an input element, a label for the input, and an icon (using Font Awesome) that represents the field.
  • There's a "Remember Me" checkbox, and a "Forgot Password?" link.
  • A "Login" button allows users to submit the form.
  • Below the form, there's a section with the text "Or" and icons for social media logins (Google, Dropbox, GitHub, Microsoft, LinkedIn).
  • There's also a "Don't have an Account?" link to switch to the signup form.

Signup Form

  • The signup form has a title "SIGN UP."
  • It contains an HTML form element with an action attribute set to #.
  • Similar to the login form, it has fields for name, email, password, and confirm password.
  • There's a checkbox for agreeing to terms and conditions.
  • A "Register" button allows users to submit the form.
  • Below the form, there's a link to switch to the login form if the user is already registered.

Read More: Exceptional Login Form using HTML, CSS and JS | See Magic on Hover

@import url('https://use.fontawesome.com/releases/v5.12.0/css/all.css');

input:focus {
    outline: none;
}

input[type=checkbox] {
    margin-right: 5px;
    cursor: pointer;
    width: auto;
}

a {
    text-decoration: none;
    color: rgb(53, 41, 161);
    cursor: pointer;
}

a:hover {
    text-decoration: underline;
}

#main-container {
    min-width: 450px;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family:"calibri";
}

.form-container {
    width: 400px;
    height: 500px;
    position: relative;
    perspective: 1000px;
    transform-style: preserve-3d;
}

.login-form,
.signup-form {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 20px;
    overflow: hidden;
    text-align: center;
    position: absolute;
    border-radius: 20px;
    background: rgb(253, 253, 253);
    animation: .8s ease-in-out forwards
}

.login-form {
    transform: translate3d(0px, 0, 0px);
}

.signup-form {
    transform: translate3d(0px, 0, -200px);
}

.login-form::before,
.signup-form::before {
    content: "";
    position: absolute;
    left: -50%;
    bottom: -5%;
    z-index: -1;
    width: 100%;
    height: 100%;
    border-radius: 30px;
    transform: rotate(45deg);
    background-color: rgba(214, 214, 214, 0.24);
}

.title {
    font-size: 30px;
}

form {
    display: flex;
    flex-direction: column;
}

.field {
    position: relative;
    margin-top: 50px;
}

form input {
    border: none;
    border-bottom: 1px solid black;
    background: transparent;
    width: 100%;
    padding: 0 30px 5px 0;
}

.field label {
    left: 0;
    bottom: 5px;
    cursor: text;
    transition: .3s;
    position: absolute;
}

.field .fa {
    right: 1%;
    top: 0;
    position: absolute;
}

.field input:focus+label,
.field input:not(:placeholder-shown)+label {
    bottom: 25px;
}

section {
    display: flex;
    justify-content: space-between;
    margin: 5px 0 50px 0;
    font-size: 15px;
}

section label {
    display: flex;
    align-items: center;
    cursor: pointer;
    color: rgba(0, 0, 0, 0.856);
}

button {
    position: absolute;
    font-size: 2rem;
}

.login-btn,
.signup-btn {
    width: 100%;
    border: none;
    font-size: 20px;
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    transition: .3s;
    color: white;
    background: #1a1a1a;
    padding: 5px;
}

.login-btn {
    margin: 0 0 35px 0;
}

.login-btn:hover,
.signup-btn:hover {
    opacity: .9;
}

.bottom {
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.other {
    margin: 10px 0 30px;
}

.separator {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
    gap: 10px;
}

.separator::before,
.separator::after {
    content: '';
    background: rgba(0, 0, 0, 0.349);
    width: 40%;
    height: 1px;
}

.alternatives span {
    margin: 0 2px;
    cursor: pointer;
    transition: .3s;
    font-size: 25px;
    padding: 10px;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
}

.alternatives span:hover {
    transform: scale(0.9);
}

.fa-google {
    background: conic-gradient(from -45deg, #ea4335 110deg, #4285f4 90deg 180deg, #34a853 180deg 270deg, #fbbc05 270deg) 73% 55%/150% 150% no-repeat;
}

.fa-microsoft {
    background: conic-gradient(from -90deg, #f44336 90deg, #4caf50 90deg 180deg, #2196f3 180deg 270deg, #ffc107 270deg) 50% 50%/100% 150% no-repeat;
}

.fa-dropbox {
    background: #3d9ae8;
}

.fa-linkedin {
    background: rgb(17, 98, 190);
}

.signup-form .field {
    margin-top: 40px;
}

.fa-github {
    background: #000;
}

.signup-form section {
    margin: 20px 0 10px 0;
}

.signup-btn {
    margin: 20px 0;
}

.signup-form .bottom {
    justify-content: flex-end;
    margin-top: 20px;
}

.above {
    animation-name: above;
}

.below {
    animation-name: below;
}

@keyframes above {
    0% {
        transform: translate3d(0, 0, -500px);
    }

    50% {
        transform: translate3d(70%, 0, -100px);
    }

    100% {
        transform: translate3d(0px, 0, 0px);
    }
}

@keyframes below {
    0% {
        transform: translate3d(0, 0, 0);
    }

    50% {
        transform: translate3d(-70%, 0, 0px);
    }

    100% {
        transform: translate3d(0px, 0, -200px);
    }
}
  • The code imports the Font Awesome library to use icons.
  • Applies global styles to reset margin, padding, box-sizing, and sets the default font to Calibri.
  • Sets the background color of the body to black.
  • Defines the main container as a flex container, centering its content both horizontally and vertically. It has a minimum width of 400px and prevents overflow.
  • The form container is styled to have a fixed width, height, and a 3D effect using perspective and transform properties.
  • Styles for login and signup forms include positioning, border-radius, padding, and a rotated background pseudo-element for a decorative effect.
  • Form titles have a font size of 30px.
  • Animation styles are defined for the forms, creating an above and below effect using translate3d.
  • Styling for buttons, input fields, labels, and form elements.
  • Checkbox styles, hyperlink styles, and focus styles for input elements.
  • Icon styles for social media login options using Font Awesome.
  • Keyframe animations for the above and below effects with translations in the 3D space.
  • The CSS code uses a dark theme, sleek design, and animations to enhance the user interface of login and signup forms.
const loginForm = document.querySelector('.login-form');
const signupForm = document.querySelector('.signup-form');

function swapPos(btn) {
    const isSignupSwitch = btn.classList.contains('signup-switch');
    signupForm.classList.toggle('above', isSignupSwitch);
    loginForm.classList.toggle('above', !isSignupSwitch);
    signupForm.classList.toggle('below', !isSignupSwitch);
    loginForm.classList.toggle('below', isSignupSwitch);
}

Function swapPos():

  • The function is named swapPos, short for "swap positions."
  • It uses document.querySelector to select elements with the classes login-form and signup-form.
  • The classList.toggle method is applied to toggle the classes above and below for both the login and signup forms.
  • The purpose is to switch the vertical position of the forms, making one form visible above the other.

Event Listeners

  • The event listener is applied to the element with the class login-switch and signup-switch.
  • When the element with the class login-switch is clicked, the swapPos function is triggered.
  • Similarly, when the element with the class signup-switch is clicked, the swapPos function is executed.

In conclusion, the provided HTML and CSS code presents an elegant and user-friendly login and signup form design. The clean structure and modern styling create a visually appealing interface for users. The inclusion of social media login options enhances the accessibility and convenience for users.

Whether you're building a new authentication system or looking to enhance the aesthetics of your existing login and signup forms, this code provides a solid foundation. Feel free to customize it further based on your specific project requirements, and don't forget to adapt the functionality as needed. Overall, this design strives to create a positive and efficient user experience during the authentication process.

Download
Tags:

You might like

Previous Post Next Post
Share to other apps
Copy Post Link