Show Hide Password With Eye Icon Using HTML 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 and Hide Passwords With Eye Icon. So Let’s Make It And Start Writing Our Html Code For The Basic Template.
One of the first things that comes to mind when considering sensitive data is a password. Because of this, the majority of websites and apps mask (or disguise) your password when you register or log in so that it cannot be seen by unauthorised parties. However, it’s best practise to include a show/hide button in password fields so users can see what they’re typing in order to prevent errors.
10+ HTML CSS Projects For Beginners (Source Code)
| Code by | Josetxu |
| Project Download | Link Available Below |
| Language used | HTML,CSS and JavaScript |
| External link / Dependencies | NO |
| Responsive | YES |
Html Code For Show Hide Password With Eye IconĀ
<!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 the (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+ HTML, CSS & JavaScript Projects With Source Code
So here is a preview with only Html codeš
Output
Lets Style Using Css Code
Css Code For Show Hide Password With Eye IconĀ
: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š„¶.
Ecommerce Website Using HTML, CSS, & JavaScript (Source Code)
We tried to add a simple styling to our show and hide project and i want you guys to try out and try adding your style this will help you in gaining some css concepts . It will help you in future by remembering the css concepts you will easily add styling to any other projects easily.
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
let’s write javascript Code for running animation and show hide password with scanning animation.
Javascript Code For Show Hide Password With Eye IconĀ
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+'•';}
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 the password.
Responsive Accordion Using HTML and CSS
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
Video Output:
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š.
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
ADVERTISEMENT
was written by – Codewithrandom
ADVERTISEMENT
Which code editor do you use for this Show Hide Password With Eye Icon coding?
I personally recommend using VS Code Studio, it’s straightforward and easy to use.
ADVERTISEMENT
is this project responsive or not?
Yes! this project is a responsive project.
ADVERTISEMENT
Do you use any external links to create this project?
No!
ADVERTISEMENT
