👉 Modern Eye Password Toggle UI using HTML, CSS & JavaScript | Stylish Login Form

Demo :


Click Video 👇👇👇

















Features:

✅ Modern UI (Glassmorphism effect)
✅ Eye Icon Toggle (Show/Hide Password)
✅ Fully Responsive
✅ Smooth Animations


Code :


📂 Folder Structure:

/password-toggle-form  

  ├── index.html  

  ├── style.css  

  ├── script.js  


🔹 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Login Form with Eye Toggle</title>
    <link rel="stylesheet" href="style.css">
    <script defer src="script.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
</head>
<body>

    <div class="login-container">
        <h2>Login</h2>
        <div class="input-group">
            <input type="text" placeholder="Email" required>
        </div>
        <div class="input-group password-wrapper">
            <input type="password" id="password" placeholder="Password" required>
            <i class="fa-solid fa-eye" id="togglePassword"></i>
        </div>
        <button class="btn">Login</button>
    </div>

</body>
</html>


🔹 style.css


* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    font-family: 'Poppins', sans-serif;

}


body {

    display: flex;

    justify-content: center;

    align-items: center;

    height: 100vh;

    background: linear-gradient(to right, #141E30, #243B55);

}


.login-container {

    background: rgba(255, 255, 255, 0.1);

    padding: 20px;

    border-radius: 12px;

    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);

    text-align: center;

    width: 320px;

    backdrop-filter: blur(10px);

}


h2 {

    color: #fff;

    margin-bottom: 20px;

}


.input-group {

    position: relative;

    margin-bottom: 15px;

}


input {

    width: 100%;

    padding: 12px;

    border: none;

    border-radius: 8px;

    outline: none;

    font-size: 16px;

}


.password-wrapper {

    position: relative;

}


.password-wrapper input {

    padding-right: 40px;

}


.password-wrapper i {

    position: absolute;

    right: 10px;

    top: 50%;

    transform: translateY(-50%);

    cursor: pointer;

    color: #aaa;

}


.password-wrapper i:hover {

    color: #fff;

}


.btn {

    width: 100%;

    padding: 12px;

    background: #00c6ff;

    border: none;

    border-radius: 8px;

    color: white;

    font-size: 18px;

    cursor: pointer;

    transition: 0.3s;

}


.btn:hover {

    background: #0072ff;

} 


🔹 script.js


const togglePassword = document.getElementById('togglePassword');

const passwordInput = document.getElementById('password');


togglePassword.addEventListener('click', () => {

    if (passwordInput.type === 'password') {

        passwordInput.type = 'text';

        togglePassword.classList.remove('fa-eye');

        togglePassword.classList.add('fa-eye-slash');

    } else {

        passwordInput.type = 'password';

        togglePassword.classList.remove('fa-eye-slash');

        togglePassword.classList.add('fa-eye');

    }

});

 


Comments

Post a Comment

Popular posts from this blog

🚀 Simple Login & Registration System in Python Tkinter 📱

Image
   Demo : Click Video 👇👇👇 ✅ Features: ✔️ Simple Login UI 🖥️ ✔️ Secure User Authentication 🔒 ✔️ SQLite Database Integration 📂 ✔️ User Registration Form ✍️ Code : import tkinter as tk from tkinter import messagebox from tkinter import ttk import sqlite3 # Global variables root = tk.Tk() root.withdraw()  # Hide main root window login_window = None home_window = None settings_window = None planner_window = None # Database setup def create_db():     conn = sqlite3.connect('user_data.db')     c = conn.cursor()     c.execute('''CREATE TABLE IF NOT EXISTS users (username TEXT, password TEXT)''')     conn.commit()     conn.close() # User registration def register_user():     username = reg_username_entry.get()     password = reg_password_entry.get()     if username and password:         conn = sqlite3.connect('user_data.db')         c = conn.cursor...
Read more

🚀 Create a Python Screen Recorder with Audio (Complete Code)

Image
  Demo : Click Video 👇👇👇 📂 Folder Structure 📁 Python-Screen-Recorder     ├── 📄 screen_recorder.py  (Main Python Script)     ├── 🎵 audio.wav  (Recorded Audio)     ├── 🎥 screen_record.avi  (Recorded Video) Dependencies Install Karo: cmd => pip install opencv-python numpy pyautogui pyaudio Code : import cv2 import numpy as np import pyautogui import pyaudio import wave import threading import tkinter as tk from tkinter import filedialog # Set screen size screen_width, screen_height = pyautogui.size() frame_rate = 20 # Audio recording settings audio_format = pyaudio.paInt16 channels = 2 rate = 44100 chunk = 1024 audio_filename = "audio.wav" video_filename = "screen_record.avi" # Audio recording function def record_audio():     audio = pyaudio.PyAudio()     stream = audio.open(format=audio_format, channels=channels, rate=rate, input=True, frames_per_buffer=chunk)     frames = []     whil...
Read more

Python IP Tracker App with GUI | Track IP Location Real-Time! (Working Project)

Image
Python IP Tracker App 🔥   Location, ISP, Country, City — sab real-time milta hai! Ab tum bhi bana sakte ho yeh amazing GUI app – full source code available hai 👇   Check the video & start building your own!    Demo : Click Video 👇👇👇 Code : import tkinter as tk from tkinter import messagebox, scrolledtext import requests def track_ip(ip):     try:         url = f"http://ip-api.com/json/{ip}"         response = requests.get(url)         data = response.json()         if data['status'] == 'success':             result = (                 f"IP: {data['query']}\n"                 f"Country: {data['country']} ({data['countryCode']})\n"                 f"Region: {data['regionName']} ({data['region']})\n"   ...
Read more