Beautiful HTML & CSS Login Page UI With Source Code

Beautiful HTML and CSS Login page

In this tutorial, you will learn how to create two beautiful HTML and CSS login page UI templates that not only looks great but is also responsive and user-friendly.

Demo of the Login Pages

Demo 1
Demo 2

HTML & CSS for Login Page Template 1:

Three images are used in this login page template, here are the download links of the images –

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS Login Page Template</title>
    <link href="https://fonts.googleapis.com/css2?family=Muli:wght@400;700&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./style.css">
</head>
<body>

    <div class="main-container">
        <div class="form-container">

            <div class="form-body">

                <h2 class="title">Log in with</h2>

                <div class="social-login">
                    <ul>
                        <li class="google"><a href="#">Google</a></li>
                        <li class="fb"><a href="#">Facebook</a></li>
                    </ul>
                </div><!-- SOCIAL LOGIN -->

                <div class="_or">or</div>

                <form action="" class="the-form">

                    <label for="email">Email</label>
                    <input type="email" name="email" id="email" placeholder="Enter your email">

                    <label for="password">Password</label>
                    <input type="password" name="password" id="password" placeholder="Enter your password">

                    <input type="submit" value="Log In">

                </form>

            </div><!-- FORM BODY-->

            <div class="form-footer">
                <div>
                    <span>Don't have an account?</span> <a href="">Sign Up</a>
                </div>
            </div><!-- FORM FOOTER -->

        </div><!-- FORM CONTAINER -->
    </div>

</body>
</html>
*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

body {
    margin: 0;
    padding: 0;
    color: #222222;
    background-color: #f2f2f0;
    background-color: #56385a;
    background-image: url("../images/cover.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: fixed;
    padding: 20px;
    overflow-x: hidden;
}

body,
input,
button {
    font-family: "Muli", sans-serif, -apple-system, BlinkMacSystemFont,
        "Helvetica Neue", Helvetica, sans-serif;
    outline: none;
}

.main-container {
    max-width: 900px;
    margin: 0 auto;
}

a {
    color: inherit;
    outline: none;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.form-container {
    max-width: 450px;
    margin: 0 auto;
}

.form-body {
    background-color: #4a304d;
    padding: 50px;
    color: #ffffff;
    border-radius: 3px;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
        0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

@media only screen and (max-width: 500px) {
    .form-body {
        padding: 50px 40px;
    }
}

@media only screen and (max-width: 455px) {
    .form-body {
        padding: 45px 30px;
    }
}

@media only screen and (max-width: 340px) {
    .form-body {
        padding: 30px 20px;
    }
}

.form-body .title {
    margin: 0;
    text-align: center;
    font-weight: normal;
}

.social-login ul {
    list-style-type: none;
    margin: 30px 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
}

.social-login ul li {
    flex: 1 auto;
}

.social-login ul li a {
    background-color: #56385a;
    border-radius: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    padding: 15px;
    color: #e6e6e6;
    font-weight: bold;
    text-decoration: none;
    transition: background-color 0.3s;
}

.social-login ul li a::before {
    content: "";
    width: 30px;
    height: 30px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 30px;
    margin-right: 5px;
}

.social-login ul li a:hover {
    background-color: #fff199;
    color: #0e090e;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

li.google {
    margin-right: 10px;
}

li.google a::before {
    background-image: url("../images/google.png");
}

li.fb {
    margin-left: 10px;
}

li.fb a::before {
    margin: 0;
    background-image: url("../images/fb.png");
}

@media only screen and (max-width: 400px) {
    .social-login ul {
        flex-direction: column;
    }

    li.google,
    li.fb {
        margin: 0;
    }

    li.google {
        margin-bottom: 10px;
    }
}

._or {
    text-align: center;
    margin-bottom: 20px;
    color: #d9d9d9;
}

.the-form {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.the-form label {
    margin-bottom: 5px;
    color: #e6e6e6;
    font-weight: bold;
}

.the-form [type="email"],
.the-form [type="password"] {
    padding: 15px;
    font-size: 16px;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    margin-bottom: 15px;
    transition: background 0.3s;
    color: #e6e6e6;
}

.the-form [type="email"]::placeholder,
.the-form [type="password"]::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.the-form [type="email"]:hover,
.the-form [type="password"]:hover {
    background: rgba(0, 0, 0, 0.1);
}

.the-form [type="email"]:focus,
.the-form [type="password"]:focus {
    background: #ffffff;
    box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
    border-color: #4a304d;
    color: #222222;
}

.the-form [type="email"]:focus::placeholder,
.the-form [type="password"]:focus::placeholder {
    color: #666666;
}

.the-form [type="submit"] {
    background: #ffb37b;
    border: 1px solid rgba(0, 0, 0, 0.1);
    padding: 18px;
    font-size: 20px;
    border-radius: 3px;
    cursor: pointer;
    margin-top: 20px;
    color: black;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
        0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.the-form [type="submit"]:hover {
    opacity: 0.9;
}

.form-footer div {
    text-align: center;
    padding: 25px 20px;
    font-size: 18px;
    color: #e6e6e6;
}

.form-footer div a {
    color: #ffb37b;
}

Login Page UI Template 2:

Download the images that I have used in this login page: Download Images.

<!DOCTYPE html>
<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">
    <title>HTML and CSS Login Page</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <main class="container">
        <section class="wrap">
            <h1>Login</h1>
            <form action="" method="post" class="login-form">
                <input type="email" name="email" placeholder="Email" required>
                <input type="password" name="password" placeholder="Password" required>
                <button type="submit">Login</button>
            </form>
            <p class="text-center">OR</p>
            <ul class="tp-login">
                <li><a href=""><img src="./images/google.png" alt="">Continue with Google</a></li>
                <li><a href=""><img src="./images/microsoft.png" alt=""> Continue with Microsoft</a></li>
                <li><a href=""><img src="./images/apple.png" alt="">Continue with Apple</a></li>
            </ul>
            <p class="create-new text-center"><a href="">Create new Account?</a></p>
        </section>
    </main>
</body>
</html>
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");
*,
*::before,
*::after {
    box-sizing: border-box;
    line-height: 1.5em;
}

:root {
    --font-family: "Open Sans", sans-serif;

    --primary-hue: 261.3559322034deg;
    --primary-saturation: 42.4460431655%;
    --primary-lightness: 27.2549019608%;

    --prime-color: hsl(
        var(--primary-hue),
        var(--primary-saturation),
        var(--primary-lightness)
    );
    --font-color: hsl(var(--primary-hue), var(--primary-saturation), 13%);
    --light-font-color: hsl(var(--primary-hue), var(--primary-saturation), 90%);
    --body-bg: hsl(var(--primary-hue), var(--primary-saturation), 97%);
}

html {
    font-size: 16px;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    overflow-wrap: break-word;
    font-family: var(--font-family);
    color: var(--font-color);
    background-color: var(--body-bg);
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
}

a {
    all: unset;
    cursor: pointer;
}

input,
button,
textarea {
    font-family: var(--font-family);
    font-size: 1rem;
    outline: none;
}

h1 {
    text-align: center;
    font-size: 2rem;
    padding: 10px;
    background-image: linear-gradient(
        to right,

        transparent,
        #ffffff,
        transparent
    );
}

.container .wrap {
    max-width: 400px;
    margin: 0 auto;
    padding: 20px;
}

.login-form {
    display: flex;
    flex-flow: column wrap;
    gap: 10px;
}
.login-form input {
    padding: 15px 20px;
    outline: none;
    border-radius: 3px;
    border: 1px solid hsl(var(--primary-hue), var(--primary-saturation), 85%);
    background: hsl(var(--primary-hue), var(--primary-saturation), 98.5%);
}
.login-form input:hover,
.login-form input:focus {
    border-color: hsl(var(--primary-hue), var(--primary-saturation), 50%);
}
.login-form input:focus {
    background-color: white;
}
.login-form input::placeholder {
    font-weight: bold;
    color: gray;
}
.login-form [type="submit"] {
    padding: 15px;
    cursor: pointer;
    background: var(--prime-color);
    color: var(--light-font-color);
    border: 1px solid var(--prime-color);
    border-radius: 3px;
    transition: 0.2s all;
    font-weight: bold;
}
.login-form [type="submit"]:hover {
    box-shadow: 0 10px 15px -3px hsla(var(--primary-hue), var(--primary-saturation), 7%, 0.1),
        0 4px 6px -4px hsla(var(--primary-hue), var(--primary-saturation), 7%, 0.1);
    transform: translateY(-5px);
    color: white;
}

ul.tp-login {
    all: unset;
    display: flex;
    flex-flow: column wrap;
    list-style: none;
    gap: 10px;
}
ul.tp-login a {
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid hsl(var(--primary-hue), var(--primary-saturation), 85%);
    background: hsl(var(--primary-hue), var(--primary-saturation), 98.5%);
    padding: 15px;
    border-radius: 3px;
    font-weight: bold;
    transition: 0.2s all;
}
ul.tp-login a:hover {
    box-shadow: 0 10px 15px -3px hsla(var(--primary-hue), var(--primary-saturation), 7%, 0.1),
        0 4px 6px -4px hsla(var(--primary-hue), var(--primary-saturation), 7%, 0.1);
    transform: translateY(-5px);
    border-color: hsl(var(--primary-hue), var(--primary-saturation), 50%);
}
ul.tp-login a img {
    width: 20px;
    margin-right: 7px;
}

.text-center {
    text-align: center;
}

.create-new a {
    font-weight: bold;
    text-decoration: underline;
}

Leave a Reply

Your email address will not be published. Required fields are marked *

We use cookies to ensure that we give you the best experience on our website. Privacy Policy