Form, Login Form

Beautiful login form HTML and CSS

Hello readers, In this particular post we will discuss how to build a login form using HTML and CSS. Sign in form is used to access any account. In the last post, we discussed how to create a Free Html contact form. Now, our focus is to create a login form using HTML and CSS.

As you can see in the image we have created a sign-in form using Html and CSS. This sign-in form has a lot of features and they are created with the help of HTML and CSS. Let’s see why we have used Html and CSS to create this form.

Html:

As we all know that HTML is a markup language and we use this language to create the basics and skeleton of our project. In this login form. we have created the checkbox, input fields, buttons, heading, and text with the help of HTML. Html helps us to create a lot of things but it does not have enough properties for designing. For design purposes, we need to take help from CSS properties.

CSS:

It is also known as a markup language and we use this language to add the design to the HTML things. We have created the basic skeleton of this form with the help of HTML. Now we will use CSS properties to design this form.

As you can see in the image we have created this beautiful login form. It has a logo at the top of the form. The background is dark and it can be changed to another color or picture. Then we created two boxes. In the first box, we have the fields of input. Fields are used to take the input from the user. Then we have a checkbox that whether you want to save your information for the future or not.

Then we have a text for forgot your password. If you don’t want to log in using email and password then you can use your social accounts to log in. These accounts are given below and you can simply log in with the help of these accounts. For that, you need to click on the below create account button.

A sign-in form is created using some steps. We will follow these steps for the creation of this project. We will create this sign-in form in 3 steps.

Syntax errors will be solved using code editor recommendations. Every code editor has its own features but vs code and sublime text editor 3 have a lot of unique features.

Html source code:

Create an html file and name it, then save it with the extension of .html at the end of the name. Html code is given below and used in your newly created Html file.

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Social Login Form - FantacyDesigns</title>
    <link rel="stylesheet" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Ubuntu:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap" rel="stylesheet">
</head>
<body>
    <div class="login-form">
        <div class="logo"></div>
        <div class="container">
            <h1>Login with social club</h1>
            <form action="">
                <div class="txtb">
                    <input type="text" placeholder=" ">
                    <span class="placeholder">Email</span>
                </div>
                <div class="txtb">
                    <input type="password" id="passwordInput" placeholder=" ">
                    <span class="placeholder">Password</span>
                    <i class="show-password-btn">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" height="16" width="16" class="UI__Icon__icon" data-ui-name="visibility_off_icon"><path d="M29.8 17.2c-2.2 1.7-4.6 3-7.1 3.7l-2.5-2.5c.6-.8.9-1.8.9-2.9 0-1.4-.5-2.6-1.5-3.6-1.7-1.7-4.5-1.9-6.4-.6l-1.7-1.7c6.3-1.3 12.9.1 18.4 4.3.6.5 1.5.4 1.9-.2.5-.6.4-1.5-.2-1.9-6.7-5.1-14.9-6.6-22.4-4.4L5.7 3.9c-.5-.5-1.4-.5-1.9 0s-.5 1.4 0 1.9l2.6 2.6c-2 .9-4 2-5.8 3.4-.6.5-.7 1.3-.2 1.9.3.3.7.5 1.1.5.3 0 .6-.1.8-.3 1.9-1.5 4-2.6 6.2-3.4l2.9 2.9c-.3.6-.4 1.2-.4 1.8 0 .8.5 1.4 1.3 1.5.6.1 1.2-.4 1.4-1l2.2 2.2c-.2 0-.3 0-.5-.1-.7-.2-1.5.2-1.7.9-.2.7.2 1.5.9 1.7.5.2 1 .2 1.5.2.7 0 1.4-.2 2.1-.5l1.5 1.5c-6 1-12.2-.5-17.3-4.5-.6-.5-1.5-.4-1.9.2-.5.6-.4 1.5.2 1.9 4.6 3.6 10 5.4 15.5 5.4 2 0 3.9-.2 5.9-.7l4.1 4.1c.3.3.6.4 1 .4s.7-.1 1-.4c.5-.5.5-1.4 0-1.9L25.1 23c2.3-.9 4.6-2.1 6.6-3.7.6-.5.7-1.3.2-1.9-.7-.6-1.5-.7-2.1-.2zm-12.2-3.3c.4.4.7 1 .7 1.7 0 .3-.1.6-.2.8l-3-3c.9-.3 1.9-.1 2.5.5z"></path></svg>
                    </i>
                </div>
                <label class="checkbox">
                    <input type="checkbox">
                    <span>Keep me logged in</span>
                </label>
                <div class="forgot-signin-container">
                    <a href="#" class="link">Forgot your password?</a>
                    <input type="button" value="Login">
                </div>
            </form>
        </div>

<div class="container bottom-container">
            <h3 class="row">Log in using</h3>
            <div class="sm-login row">
                <a href="#">
                    <img src="images/ps.png" alt="">
                </a>
                <a href="#">
                    <img src="images/xbox.png" alt="">
                </a>
                <a href="#">
                    <img src="images/fb.png" alt="">
                </a>
                <a href="#">
                    <img src="images/google.png" alt="">
                </a>
                <a href="#">
                    <img src="images/twitter.png" alt="">
                </a>
            </div>
        </div>

<div class="create-account">
            Not a member?
            <a href="#" class="link">Create a new account</a>
        </div>
    </div>

<div class="copyright">
        &copy; 2022 - FantacyDesigns
    </div>

<head>

<title>Social Login Form - FantacyDesigns</title>

</head>

<body>

<h1>Login with social club</h1>

<span class="placeholder">Email</span>

</div>

<span class="placeholder">Password</span>

</i>

</div>

<span>Keep me logged in</span>

</label>

<a href="#" class="link">Forgot your password?</a>

</div>

</form>

</div>

<h3 class="row">Log in using</h3>

</a>

</a>

</a>

</a>

</a>

</div>

Not a member?

<a href="#" class="link">Create a new account</a>

</div>

</div>

document.querySelector(".show-password-btn").addEventListener("click",function(){

var passwordInput = document.querySelector("#passwordInput");

if(passwordInput.type == "password") passwordInput.type = "text";

else passwordInput.type = "password";

});

</script>

</body>

</html>

CSS source code:

Now create a file of CSS and save it using the .css extension at the end of the file name. It will convert your code file into a CSS file automatically. CSS code is provided below and uses this code in your CSS file.

*{
    margin: 0;
    padding: 0;
    font-family: "ubuntu",sans-serif;
    box-sizing: border-box;
}

::selection{
    background-color: #fdcf74;
}

body{
    background-image: url(images/bg.png);
    background-size: 256px;
    min-height: 100vh;
    display: grid;
    justify-items: center;
    align-items: center;
    grid-template-rows: auto 62px;
}

.login-form{
    width: 100%;
    max-width: 500px;
}

.logo{
    background-image: url(images/logo.svg);
    width: 290px;
    height: 82px;
    margin: 40px auto;
}

.container{
    margin: 20px 0;
    background-color: #fff;
    padding: 20px;
    border-radius: 2px;
    color: #4d4d4d;
}

.container h1{
    font-size: 24px;
    margin-bottom: 20px;
}

.txtb{
    height: 50px;
    margin-bottom: 20px;
    position: relative;
    overflow: hidden;
}

.txtb input{
    width: 100%;
    height: 50px;
    border: 1px solid #ddd;
    padding: 0 20px;
    font-size: 18px;
    color: #666;
    border-radius: 3px;
    outline: 3px solid #fcaf1770;
}

.placeholder{
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    user-select: none;
    pointer-events: none;
    font-size: 17px;
    transform-origin: 0 0;
    transition: .2s linear;
}

.txtb input:not(:placeholder-shown) + .placeholder{
    transform: scale(.75) translateY(-26px);
}

.txtb input:not(:placeholder-shown){
    padding-top: 12px;
}

.show-password-btn{
    position: absolute;
    right: 20px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    fill: #999;
}

.checkbox{
    display: inline-block;
    margin-bottom: 20px;
    cursor: pointer;
    padding-left: 30px;
    position: relative;
}

.checkbox input{
    display: none;
}

.checkbox span::before{
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    border: 1px solid #4d4d4d;
    left: 0;
    box-sizing: border-box;
    border-radius: 3px;
}

.checkbox span:after{
    content: "";
    position: absolute;
    width: 12px;
    height: 6px;
    border-bottom: 2px solid #333;
    border-left: 2px solid #333;
    transform: rotate(-50deg);
    box-sizing: border-box;
    left: 4px;
    top: 6px;
    display: none;
}

.checkbox input:checked + span::after{
    display: block;
}

.forgot-signin-container{
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.link{
    color: #fcaf17;
    text-decoration: none;
    transition: .2s linear;
}

.link:hover{
    text-decoration: underline;
}

.forgot-signin-container input{
    width: 100px;
    height: 38px;
    border: none;
    background-image: linear-gradient(90deg,#f7931e,#fcaf17);
    color: #fff;
    font-weight: 700;
    outline: none;
    cursor: pointer;
    border-radius: 3px;
}

.forgot-signin-container input:hover{
    background: #fcaf17;
}

.bottom-container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

.bottom-container h3{
    font-size: 18px;
    font-weight: 500;
}

.sm-login{
    display: flex;
    justify-content: space-between;
}

.sm-login a{
    width: 38px;
    margin: 0 5px;
    overflow: hidden;
}

.sm-login a img{
    width: 100%;
}

.create-account{
    text-align: center;
    color: #fff;
    margin: 30px 0;
}

.copyright{
    color: #999;
    font-size: 12px;
}

@media screen and (max-width: 520px){
    body{
        align-items: unset;
    }

.logo{
        width: 236px;
        height: 67px;
        margin: 16px auto;
    }

.container{
        margin: 8px;
    }
    .row{
        width: 100%;
    }
    .sm-login{
        margin-top: 8px;
    }
    .sm-login a{
        flex: 1;
        max-width: 65px;
    }
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

165

166

167

168

169

170

171

172

173

174

175

176

177

178

179

180

181

182

183

184

185

186

187

188

189

190

191

192

193

194

195

196

197

198

199

200

201

202

203

204

205

206

207

208

209

210

211

212

213

214

215

216

217

218

219

220

221

222

223

224

225

226

227

228

229

margin: 0;

padding: 0;

font-family: "ubuntu",sans-serif;

box-sizing: border-box;

}

::selection{

background-color: #fdcf74;

}

body{

background-size: 256px;

min-height: 100vh;

display: grid;

justify-items: center;

align-items: center;

grid-template-rows: auto 62px;

}

.login-form{

width: 100%;

max-width: 500px;

}

.logo{

width: 290px;

height: 82px;

margin: 40px auto;

}

.container{

margin: 20px 0;

background-color: #fff;

padding: 20px;

border-radius: 2px;

color: #4d4d4d;

}

.container h1{

font-size: 24px;

margin-bottom: 20px;

}

.txtb{

height: 50px;

margin-bottom: 20px;

position: relative;

overflow: hidden;

}

.txtb input{

width: 100%;

height: 50px;

border: 1px solid #ddd;

padding: 0 20px;

font-size: 18px;

color: #666;

border-radius: 3px;

outline: 3px solid #fcaf1770;

}

.placeholder{

position: absolute;

left: 20px;

top: 50%;

transform: translateY(-50%);

user-select: none;

pointer-events: none;

font-size: 17px;

transform-origin: 0 0;

transition: .2s linear;

}

.txtb input:not(:placeholder-shown) + .placeholder{

transform: scale(.75) translateY(-26px);

}

.txtb input:not(:placeholder-shown){

padding-top: 12px;

}

.show-password-btn{

position: absolute;

right: 20px;

top: 50%;

transform: translateY(-50%);

cursor: pointer;

fill: #999;

}

.checkbox{

display: inline-block;

margin-bottom: 20px;

cursor: pointer;

padding-left: 30px;

position: relative;

}

.checkbox input{

display: none;

}

.checkbox span::before{

content: "";

position: absolute;

width: 20px;

height: 20px;

border: 1px solid #4d4d4d;

left: 0;

box-sizing: border-box;

border-radius: 3px;

}

.checkbox span:after{

content: "";

position: absolute;

width: 12px;

height: 6px;

border-bottom: 2px solid #333;

border-left: 2px solid #333;

transform: rotate(-50deg);

box-sizing: border-box;

left: 4px;

top: 6px;

display: none;

}

.checkbox input:checked + span::after{

display: block;

}

.forgot-signin-container{

display: flex;

align-items: center;

justify-content: space-between;

}

.link{

color: #fcaf17;

text-decoration: none;

transition: .2s linear;

}

.link:hover{

text-decoration: underline;

}

.forgot-signin-container input{

width: 100px;

height: 38px;

border: none;

color: #fff;

font-weight: 700;

outline: none;

cursor: pointer;

border-radius: 3px;

}

.forgot-signin-container input:hover{

background: #fcaf17;

}

.bottom-container{

display: flex;

flex-wrap: wrap;

justify-content: space-between;

align-items: center;

}

.bottom-container h3{

font-size: 18px;

font-weight: 500;

}

.sm-login{

display: flex;

justify-content: space-between;

}

.sm-login a{

width: 38px;

margin: 0 5px;

overflow: hidden;

}

.sm-login a img{

width: 100%;

}

.create-account{

text-align: center;

color: #fff;

margin: 30px 0;

}

.copyright{

color: #999;

font-size: 12px;

}

@media screen and (max-width: 520px){

body{

align-items: unset;

}

.logo{

width: 236px;

height: 67px;

margin: 16px auto;

}

.container{

margin: 8px;

}

.row{

width: 100%;

}

.sm-login{

margin-top: 8px;

}

.sm-login a{

flex: 1;

max-width: 65px;

}

Then connect these files with each other for adding the properties of CSS into the HTML file.

Download source code:

If you find any error while connecting these files with each other download the source code. The source code is given below and you can download It for free by clicking at download source code button.

Task:

In this login form, you have learned how to use input text fields, checkboxes, button design, text color, and social media icon usage. Now you have to do some tasks for better learning.
Task: Change the position of the login button from right to center. Then add another field to confirm the password. Change social media icons and import new icons with the help of the font-awesome website. In the background, you can add a solid color, background image, and gradient color. It all depends on you how you want to design it.

We have tried to cover each and everything related to this form. If you have any type of question or suggestion then feel free to ask in the comment section.

Thanks for reading this article.

Go to top

Download Source CodeClick to Download