Awesome Sign Up Form Design Using HTML & CSS

Hello readers, Today in this blog you'll learn how to create a SignUp Form Design using only HTML & CSS. Earlier I have shared many blogs on How to Create a Signup Form Design Using HTML and CSS. And, now I'm going to create a Modal Login Form using only HTML & CSS.

If you're feeling difficulty to understand what I am saying. You can watch a full video tutorial on this program ( Modal SignUpForm).

Video Tutorial of Modal Signup Form Design

As you have seen the pure CSS Modal SignUp Form Design in the video. This form is very simple and easy to create. If you are a beginner and you know HTML & CSS then you can also create this type of Modal SignUp Form. But if you know JavaScript then you can add advanced features in this form and take this program at the next level.

If you like this program ( SignUp Form Design) and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this Modal SignUp Form on your websites, projects, and HTML pages.

SignUp Form Design [Source Codes]

To create this program (Modal SignUp Form). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste these following codes in your file. You can also download the source code files through the given link. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!--Created by | PakiCoder-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://kit.fontawesome.com/47bc99a80b.js" crossorigin="anonymous"></script>
    <title>Sign Up Form</title>
    <link rel="stylesheet" href="signupform.css">
</head>

<body>
    <main class="container">
        <h2>Welcome</h2>
        <form action="">
            <div class="input-field">
                <input type="text" name="uname" placeholder="Username">
                <div class="underline"></div>
            </div>
            <div class="input-field">
                <input type="email" name="email" placeholder="Email">
                <div class="underline"></div>
            </div>
            <div class="input-field">
                <input type="password" name="psw" placeholder="Password">
                <div class="underline"></div>
            </div>
            <input type="submit" value="Sign Up">
        </form>
        <div class="footer">
            <span>Or Connect With Social Media</span>
            <div class="social-fields">
                <div class="social-field twitter">
                    <a href="#">
                        <i class="fab fa-twitter"></i>
                        Sign Up with Twitter
                    </a>
                </div>
                <div class="social-field facebook">
                    <a href="#">
                        <i class="fab fa-facebook"></i>
                        Sign Up with Facebook
                    </a>
                </div>
            </div>
        </div>
    </main>
</body>

</html>

CSS FILE:

*{
    margin: 0;
    padding: 0;
    border: 0;
    box-sizing: border-box;
    font-family: "poppins", sans-serif;
}
body{
    background: linear-gradient(180deg, #00ffdd, #00ff4d);
    background-repeat: no-repeat;
    min-height: 100vh;
    min-width: 100vw;
    display: flex;
    align-items: center;
    justify-content: center;
}
main.container{
    background: white;
    max-width: 400px;
    min-height: 40vh;
    padding: 36px;
    box-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}
main h2{
    font-weight: 600;
    margin-bottom: 30px;
    text-align: center;
    font-size: 30px;
    position: relative;
}
main h2::before{
    content: '';
    position: absolute;
    height: 4px;
    width: 135px;
    bottom: -5px;
    border-radius: 8px;
    background: linear-gradient(180deg, #00ffdd, #00ff4d);

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

.input-field{
    position: relative;
    margin: 16px 0;
}

form .input-field:first-child{
    margin-bottom: 16px;
}
.input-field .underline::before{
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: -5px;
    left: 0;
    background: rgba(0, 0, 0, 0.2);
}
.input-field .underline::after{
    content: '';
    position: absolute;
    height: 2px;
    width: 100%;
    bottom: -5px;
    left: 0;
    background: linear-gradient(180deg, #00ffdd, #00ff4d);
    transform: scaleX(0);
    transition: all .3s ease-in-out;
    transform-origin: left;

}
.input-field input:focus ~ .underline::after{
    transform: scaleX(1);
}
.input-field input{
    outline: none;
    font-size: 18px;
    color: rgba(0, 0, 0, 0.7);
}
.input-field input::placeholder{
    color: rgba(0, 0, 0, 0.5);
}
form input[type="submit"]{
    margin-top: 20px;
    padding: 8px;
    background-image: linear-gradient(to left, #00ffdd, #00ff4d);
    cursor: pointer;
    color: white;
    font-size: 20px;
    font-weight: 500;
    border-radius: 100px;
    transition: all 0.3s ease;
}
form input[type="submit"]:hover{
    letter-spacing: 1.5px;
    background-image: linear-gradient(to right, #00ffdd, #00ff4d);
}
.footer{
    display: flex;
    flex-direction: column;
    margin-top: 20px;
}
.footer span{
    color: rgba(0, 0, 0, 0.7);
    font-size: 18px;
    text-align: left;
}
.footer .social-field{
    padding: 14px;
    border-radius: 100px;
    font-size: 16px;
    width: 100%;
    cursor: pointer;
    margin-top: 18px;
}
.footer .social-field a i{
    margin: 0 16px;
    width: 15px;
}
.footer .social-field a{
    text-decoration: none;
    color: white;
}
.footer .social-field.twitter{
    background: linear-gradient(to right, #3b99f0, #468aca);
}
.footer .social-field.facebook{
    background: linear-gradient(to right, #5089f5, #2a56a1);
}

PakiCoder

Video Tutorial of Modal Signup Form Design

You might like this:

SignUp Form Design [Source Codes]

Thanks for visiting, Keep visiting.

Post a Comment

Post a Comment

About Us

Formulir Kontak