How to Create a Transparent Social Media Login Form Using JavaScript

With the help of the programming language CSS and JavaScript, we can easily create a wide variety of views Login form. Well this time we will a Login form with button Social login Media and Effects hide password show in one background transparent. How to do … It’s easy, you just have to follow a few simple steps below.


1. Prepare the image to be used background, and put the images in the same folder as index.html and style.css.

2. Open the XAMPP control panel and activate Apache.

3. Open the text editor program installed on your computer, here I use the text editor Notepad ++. Enter the following HTML5 code.

          Transparent Login dengan Login Social Media               
Forgot Password?

Save the above HTLM5 code in the xampplite folder – htdocs – create a new folder named TransparentSosmed – save the code above with the name index.html.

4. To see the results of the script code above, you can open your browser and type http: // localhost / TransparentSosmed.

5. Enter the following CSS3 code.

@import url(',500,600,700|Poppins:400,500&display=swap');*{  margin: 0;  padding: 0;  box-sizing: border-box;  user-select: none;}.bg-img{  background: url('bg.jpeg');  height: 100vh;  background-size: cover;  background-position: center;}.bg-img: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;}

Save the CSS3 code in the xampplite folder – htdocs – create a new folder named TransparentSosmed – save the CSS3 code with the name style.css.

6. Reload the URL address: http: // localhost / TransparentSosmed. First view Login forms.

Display when Login form completed form password Button appears demonstrate. But if the button demonstrate clicked does not work.

7. To activate the effect Show hide in password, open the index.html file again and enter the following JavaScript code before the code .


Don’t forget Ctrl + S.

8. Reload the URL address: http: // localhost / TransparentSosmed. First view Login forms.

Show when the form is filled out and click the button demonstrate in Passwords.

Now effect Show hide in password activated.

9. Done.

Hence the explanation of the tutorial ‘How to Display a Transparent Social Media Login Form Using JavaScript’. Much luck.

Leave a Reply

Your email address will not be published.