Cool Transparent Login Form using HTML CSS & Javascript

January 11, 2021

167

How to make Transparent Login Form ?

Hello readers, Today in this blog you’ll learn Cool Transparent Login Form using HTML CSS & Javascript. Previously I have shared a Neumorphism Form UI using HTML & CSS only, now it’s time to create an Amazing Transparent Login Form Design.

A login form is a set of credentials used to authenticate a user. A Login form is used to enter the authentication credentials of the user to access a restricted page or form. The login form carries a field for the username and another for the password.

As you can see in the image, this is a cool Transparent Login Form. Javascript is only used to show and hide passwords when the user clicks. In the image form, there is an image, a form, some texts, and some social media icons. You can change this form according to your requirements if you have basic knowledge of HTML CSS.

Video Tutorial of Transparent Login Form UI Design

I hope after watching this video you’ve understood the basic codes, concepts of this Login Form. You can switch the position of form and image very easily, you need to change some values or change the class name..

Transparent Login Form (source code)

To create this program 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. In the source files, there you also get a background image of this program…

HTML SOURCE:

<!DOCTYPE html><!– Created By Theinfowave –> <head> <title>Login Form UI</title> <link rel=”stylesheet” href=”style.css”> </head> </p><br /><br /><br /><br /> <div><br /><br /><br /><br /> <div><br /><br /><br /><br /> <header>Login Form</header><br /><br /><br /><br /> <div> <span></span> </div><br /><br /><br /><br /> <div> <span></span> <span>SHOW</span> </div><br /><br /><br /><br /> <div> <a href=”https://infobing.com/#”>Lost Your Password?</a> </div><br /><br /><br /><br /> <div> </div><br /><br /><br /><br /> <div>Or login with</div><br /><br /><br /><br /> <div><br /><br /><br /><br /> <div> <i><span>Facebook</span></i> </div><br /><br /><br /><br /> <div> <i><span>Instagram</span></i> </div><br /><br /><br /><br /> </div><br /><br /><br /><br /> <div>Don’t have an account? <a href=”https://infobing.com/#”>Sign Up</a> </div><br /><br /><br /><br /> </div><br /><br /><br /><br /> </div><br /><br /><br /><br /> <p>

You May Also Like:

CSS SOURCE:

@import url(‘https://fonts.googleapis.com/css?family=Montserrat:400,500,600,700|Poppins:400,500&display=swap’); *{ margin: 0; padding: 0; box-sizing: border-box; user-select: none; } .container{ background: url(‘images.jpg’); height: 100vh; background-size: cover; background-position: center; } .container:after{ position: absolute; content: ”; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0,0,0,0.7); } .content{ position: absolute; top: 50%; left: 50%; z-index: 999; text-align: center; padding: 60px 32px; width: 370px; transform: translate(-50%,-50%); background: rgba(255,255,255,0.04); box-shadow: -1px 4px 28px 0px rgba(0,0,0,0.75); } .content header{ color: white; font-size: 33px; font-weight: 600; margin: 0 0 35px 0; font-family: ‘Montserrat’,sans-serif; } .field{ position: relative; height: 45px; width: 100%; display: flex; background: rgba(255,255,255,0.94); } .field span{ color: #222; width: 40px; line-height: 45px; } .field input{ height: 100%; width: 100%; background: transparent; border: none; outline: none; color: #222; font-size: 16px; font-family: ‘Poppins’,sans-serif; } .space{ margin-top: 16px; } .show{ position: absolute; right: 13px; font-size: 13px; font-weight: 700; color: #222; display: none; cursor: pointer; font-family: ‘Montserrat’,sans-serif; } .pass-key:valid ~ .show{ display: block; } .pass{ text-align: left; margin: 10px 0; } .pass a{ color: white; text-decoration: none; font-family: ‘Poppins’,sans-serif; } .pass:hover a{ text-decoration: underline; } .field input[type=”submit”]{ background: #3498db; border: 1px solid #2691d9; color: white; font-size: 18px; letter-spacing: 1px; font-weight: 600; cursor: pointer; font-family: ‘Montserrat’,sans-serif; } .field input[type=”submit”]:hover{ background: #2691d9; } .login{ color: white; margin: 20px 0; font-family: ‘Poppins’,sans-serif; } .links{ display: flex; cursor: pointer; color: white; margin: 0 0 20px 0; } .facebook,.instagram{ width: 100%; height: 45px; line-height: 45px; margin-left: 10px; } .facebook{ margin-left: 0; background: #4267B2; border: 1px solid #3e61a8; } .instagram{ background: #E1306C; border: 1px solid #df2060; } .facebook:hover{ background: #3e61a8; } .instagram:hover{ background: #df2060; } .links i{ font-size: 17px; } i span{ margin-left: 8px; font-weight: 500; letter-spacing: 1px; font-size: 16px; font-family: ‘Poppins’,sans-serif; } .signup{ font-size: 15px; color: white; font-family: ‘Poppins’,sans-serif; } .signup a{ color: #3498db; text-decoration: none; } .signup a:hover{ text-decoration: underline; }

I hope this helps you. Thank you for visiting and follow our Facebook and Twitter page to keep updated.

Previous articleNeumorphism Form UI Pure HTML and CSS

Next articleHow to Website Animating Design With HTML & CSS

Cool Transparent Login Form using HTML CSS & Javascript

Hello readers, Today in this blog you’ll learn Cool Transparent Login Form using HTML CSS & Javascript. Previously I have shared a Neumorphism Form UI using HTML & CSS only, now it’s time to create an Amazing Transparent Login Form Design.

Related Articles

TOP 10 SITES FOR FREE ONLINE COURSES WITH CERTIFICATES

Google recognizes Gama Pehalwan in India as the most famous wrestler, with a birth anniversary Doodle

Prashanth Neel K.GF Chapter 1 : Four Year Old Prasant Neel Locked Up in Telgue: KGF Director

LEAVE A REPLY Cancel reply

Latest Articles

TOP 10 SITES FOR FREE ONLINE COURSES WITH CERTIFICATES

Google recognizes Gama Pehalwan in India as the most famous wrestler, with a birth anniversary Doodle

Prashanth Neel K.GF Chapter 1 : Four Year Old Prasant Neel Locked Up in Telgue: KGF Director

Navjot Singh Sidhu gets 1-year jail

Zara Phythian: ‘Dr Strange’ actress jailed for sexual abuse of teen girl

Cool Transparent Login Form using HTML CSS & Javascript

Hello readers, Today in this blog you’ll learn Cool Transparent Login Form using HTML CSS & Javascript. Previously I have shared a Neumorphism Form UI using HTML & CSS only, now it’s time to create an Amazing Transparent Login Form Design.

Related Articles

LEAVE A REPLY Cancel reply

Stay Connected

Latest Articles