Login form with CSS

In this tutorial, I’ll show you how to create a login form with pure CSS. First, look the video above to see how I make the login form. Then after the video, there’s a preview and the code of the result.

Video

The HTML

&lt…


This content originally appeared on DEV Community and was authored by Posandu

In this tutorial, I’ll show you how to create a login form with pure CSS. First, look the video above to see how I make the login form. Then after the video, there’s a preview and the code of the result.

Video

The HTML 

<form action="#!" id="main">
    <h2>Login to your account</h2>

    <div class="input-parent">
        <label for="username">Username or Email</label>
        <input type="text" id="username" />
    </div>

    <div class="input-parent">
        <label for="password">Password</label>
        <input type="password" id="password" />
    </div>

    <button type="submit">Login</button>
</form>

The CSS 

*,
*:before,
*:after {
    margin: 0;
    padding: 0;
    font-family: inherit;
    box-sizing: border-box;
}
#main {
    width: max-content;
    margin: 40px auto;
    font-family: "Segoe UI", sans-serif;
    padding: 25px 28px;
    background: #151414;
    border-radius: 4px;
    border: 1px solid #302d2d;
    animation: popup 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes popup {
    0% {
        transform: scale(0.2);
        opacity: 0;
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}
h2 {
    text-align: center;
    font-size: 28px;
    margin-bottom: 20px;
    font-weight: 400;
    color: #e7e7e7;
}
.input-parent {
    display: block;
    margin-bottom: 20px;
}
label {
    display: block;
    font-size: 16px;
    margin-bottom: 8px;
    color: #a4a4a4;
}
.input-parent input {
    padding: 10px 8px;
    width: 100%;
    font-size: 16px;
    background: #323131;
    border: none;
    color: #c7c7c7;
    border-radius: 4px;
    outline: none;
    transition: all 0.2s ease;
}
.input-parent input:hover {
    background: #404040;
}
.input-parent input:focus {
    box-shadow: 0px 0px 0px 1px #0087ff;
}
button {
    padding: 10px 18px;
    font-size: 15px;
    background: #1a3969;
    width: 100%;
    border: none;
    border-radius: 4px;
    color: #f4f4f4;
    transition: all 0.2s ease;
}
button:hover {
    opacity: 0.9;
}
button:focus {
    box-shadow: 0px 0px 0px 3px black;
}
body {
    background: #1c1b1b;
}

Preview

Click me

So, I have nothing to write here because there’s a video how I am doing it.
Wanna see more like this ? Then, subscribe me on YouTube


This content originally appeared on DEV Community and was authored by Posandu


Print Share Comment Cite Upload Translate Updates
APA

Posandu | Sciencx (2021-08-28T14:04:08+00:00) Login form with CSS. Retrieved from https://www.scien.cx/2021/08/28/login-form-with-css/

MLA
" » Login form with CSS." Posandu | Sciencx - Saturday August 28, 2021, https://www.scien.cx/2021/08/28/login-form-with-css/
HARVARD
Posandu | Sciencx Saturday August 28, 2021 » Login form with CSS., viewed ,<https://www.scien.cx/2021/08/28/login-form-with-css/>
VANCOUVER
Posandu | Sciencx - » Login form with CSS. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2021/08/28/login-form-with-css/
CHICAGO
" » Login form with CSS." Posandu | Sciencx - Accessed . https://www.scien.cx/2021/08/28/login-form-with-css/
IEEE
" » Login form with CSS." Posandu | Sciencx [Online]. Available: https://www.scien.cx/2021/08/28/login-form-with-css/. [Accessed: ]
rf:citation
» Login form with CSS | Posandu | Sciencx | https://www.scien.cx/2021/08/28/login-form-with-css/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts