Show Hide Password With Eye Icon | Html,css And Javascript

Show Hide Password With Eye Icon | Html,css, And Javascript

In this article, we create a fantastic show hide password with an eye icon and unique animation. We use html, css, and javascript to show hide passwords. So let’s make it and start writing our html code for the basic template.

Html Code

<!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>Show Hide Password With Eye Icon</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <input id="pass" type="password" placeholder="Password">
    <span id="fakepass">Password</span>
    <button id="reveal" disabled="disabled"><span></span></button>
  </div>
  <!-- JAVASCRIPT -->
  <script src="app.js"></script>
</body>

</html>

This is our baisc Html Code. We link our Css file and javascript file to (we write css and js later) main file. We use a simple div tag for content separation then use an input type password and create a button that we disabled using Html🔥.

50+ Frontend Project With Code 

So here is a preview with only Html code👇

Output

Show Hide Password With Eye Icon

Lets Style Using Css Code

Css Code

:root {
  --light-grey: #e0e0e0;
  --dark-grey: #c5c5c5;
}

body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: var(--light-grey);
  font-family: monospace, Arial, Helvetica, sans-serif;
}

body * {
  box-sizing: border-box;
  outline: none;
}

.container {
  width: 210px;
  position: relative;
}

input {
  background: #ececec;
  border: 0;
  font-size: 1em;
  width: 100%;
  box-shadow: 0.15em 0.15em 0.25em var(--dark-grey) inset,
    -0.15em -0.15em 0.25em #ffffff80 inset, 0.3em 0.3em 0.6em var(--dark-grey),
    -0.2em -0.2em 0.5em #ffffff80;
  border-radius: 4px;
  padding: 10px;
  position: absolute;
  z-index: 1;
  height: 40px;
  color: #808080;
  font-family: monospace, Arial, Helvetica, sans-serif;
}

input::placeholder {
  color: #808080;
  opacity: 1;
}

input:-ms-input-placeholder {
  color: #808080;
}

input::-ms-input-placeholder {
  color: #808080;
}

input.active {
  animation: scanning 1s ease 0s 1;
  background: linear-gradient(90deg, #02de0b 50%, #ececec 100%);
  background-repeat: no-repeat;
  background-position: -210px;
  background-color: #ececec;
}

@keyframes scanning {
  0% {
    background-position: 150px;
  }
  100% {
    background-position: -210px;
  }
}

#reveal {
  width: 40px;
  height: 40px;
  border-radius: 4px;
  border: 0;
  background: linear-gradient(145deg, #72c0ff, #0070ca);
  cursor: pointer;
  position: absolute;
  z-index: 3;
  right: 0px;
  box-shadow: 0.3em 0.3em 0.6em var(--dark-grey), -0.2em -0.2em 0.5em #fff;
  border: 2px solid var(--light-grey);
  transition: all 0.5s ease 0s;
  border-top-color: #cccccc;
  border-bottom-color: #eee;
}

#reveal:before {
  content: "";
  background: radial-gradient(
    circle at center,
    #00000080 1px,
    #00000080 2px,
    #00000080 3px,
    #00000080 4px
  );
  width: 18px;
  height: 18px;
  border-radius: 0 100%;
  transform: rotate(-45deg) skew(-10deg, -10deg);
  left: 9px;
  position: absolute;
  top: 9px;
  transition: all 0.25s ease 0s;
}

#reveal:after {
  content: "";
  width: 20px;
  height: 18px;
  border-radius: 100%;
  left: 6px;
  top: 4px;
  position: absolute;
  border: 2px dotted #fff0;
  border-bottom-color: #00000080;
  transition: all 0.25s ease 0s;
}

#reveal:disabled {
  transition: all 0.5s ease 0s;
  background: linear-gradient(145deg, #ced5e0, #757575) !important;
  cursor: default;
}

#reveal.open {
  transition: all 0.5s ease 0s;
  background: linear-gradient(145deg, #8ce88f, #009205);
}

#reveal.open:after {
  transform: rotateX(-180deg);
  top: 10px;
  background: radial-gradient(
    circle at 50% 12px,
    #00000000 1px,
    #ececec 2px,
    #ffffff 3px,
    #00000000 4px
  );
}

#reveal span:before {
  display: none;
  font-family: monospace;
}

#reveal:hover span:before {
  content: "Show Password";
  display: block;
  position: absolute;
  background: #4fa8ef;
  top: -4.5em;
  padding: 0.45em 0.5em;
  left: -0.9em;
  border-radius: 2px;
  font-size: 0.85em;
  color: #1d4c72;
  min-height: 2.25em;
}

#reveal:hover span:after {
  content: "";
  display: block;
  position: absolute;
  border: 0.7em solid transparent;
  border-top-color: #4fa8ef;
  left: 0.7em;
  top: -1.15em;
}

#reveal.open:hover span:before {
  content: "Hide Password";
  background: #61cd64 !important;
  color: #215d23;
}

#reveal.open:hover span:after {
  border-top-color: #61cd64;
}

#reveal[disabled="disabled"]:hover span:before {
  content: "Empty Password";
  background: #b3b8c0 !important;
  color: #4d4e51;
}

#reveal[disabled="disabled"]:hover span:after {
  border-top-color: #b3b8c0;
}

#fakepass {
  font-size: 1em;
  width: 0%;
  border-radius: 4px 0 0 4px;
  position: absolute;
  background: #ececec;
  z-index: 2;
  height: 40px;
  top: 0;
  right: 0;
  left: 0;
  transition: all 1s ease 0s;
  width: 0;
  line-height: 40px;
  text-indent: 10px;
  overflow: hidden;
  box-shadow: 0.15em 0.15em 0.25em var(--dark-grey) inset,
    -0.15em -0.15em 0.25em #ffffff80 inset;
  animation: scan-hide 1s ease-out 0s 1;
  color: #808080;
}

#fakepass:before {
  content: "";
  height: 40px;
  width: 0px;
  position: absolute;
  right: 13px;
  top: 0;
  box-shadow: -10px 0 20px 10px #33a4ffad, 0 0 10px 5px #33a4ffab;
}

#fakepass.scan {
  display: block;
  animation: scan-show 1s ease-out 0s 1;
  width: 0%;
  left: 0;
}

#fakepass.scan:before {
  display: none;
}

#fakepass:after {
  content: "";
  height: 40px;
  width: 2px;
  background: #92ceff;
  position: absolute;
  right: 10px;
  top: 0;
  box-shadow: 0 0 3px 1px #33a4ff, 0 0 5px 3px #33a4ff;
  animation: light 0.15s ease 0s infinite;
}

#fakepass.scan:after {
  background: #07ff10;
  box-shadow: 0 0 3px 1px #00cc08, 0 0 5px 3px #00cc08;
  right: 5px;
}

@keyframes light {
  50% {
    opacity: 0.5;
  }
}

@keyframes scan-show {
  0% {
    width: 100%;
  }
  100% {
    width: 0%;
  }
}

@keyframes scan-hide {
  0% {
    width: 0%;
    left: 0;
    right: inherit;
  }
  98% {
    width: 100%;
    left: 0;
    right: inherit;
  }
  99% {
    width: 100%;
    left: inherit;
    right: 0;
  }
  100% {
    width: 0%;
    left: inherit;
    right: 0;
  }
}

@-moz-document url-prefix() {
  #fakepass {
    text-shadow: 0 0 2px #666, 0 0 2px #666, 0 0 2px #666, 0 0 2px #666,
      0 0 2px #666, 0 0 2px #666, 0 0 2px #666, 0 0 2px #666;
  }
}

We write this whole code to style our show hide password with an eye icon. In css, we use variables to use the same theme color. Then we style our input section 🔥because the input section is the central part of this project. Then we style a button that helps to show the hide button. We use before and after styling selectors for better styling🥶.

Here is a preview but it’s not working well because we have not javascript till now. So let’s add javascript code to complete our show hide password with an eye icon👇.

Css Updated Output

Show Hide Password With Eye Icon

let’s write javascript Code for running animation and show hide password with scanning animation.

Javascript Code

var btn = document.getElementById('reveal');
var box = document.getElementById('pass');
var fak = document.getElementById('fakepass');
const isEmpty = str => !str.trim().length;

btn.addEventListener('click', function() {
    fak.innerHTML='';
    var x = box.value.length;
    for(var i=0; i<x; i++ ){fak.innerHTML=fak.innerHTML+'&bullet;';}
    fak.classList.toggle('scan');
    this.classList.toggle('open');
    box.classList.toggle('active');
    (box.type=='password') ? box.type='text' : setTimeout(function(){ box.type='password' }, 500);;	
});

box.addEventListener("input", function() {
  if(!isEmpty(this.value)) btn.removeAttribute('disabled'); else btn.setAttribute('disabled', 'disabled');
});

That’s it for our project. We write all our code to show hide password functionality. In javascript first, we access all Html elements then add an event listener to work when a user clicks on show hide password.

Here is the final preview of the project, you can see when the page loads a scanning animation scan input field. If we click show password a green scan line scan password and text show🤯.

Final Output

Show Hide Password

Show Hide Password

Hope you like this project, we create your own and use this project in any project as a part project like the reviews section, and a contact form. If you need any more project-related frontend. Visit our homepage and you get 100+ projects💝.

Quiz Project Using Javascript

if you have any confusion Comment below or you can contact us by filling out our contact us form from the home section. 🤞🎉

Code By – Josetxu

written by – Codewithrandom

Share on:

Leave a Comment