WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Login button
2041
logicalbug731
Open In Editor
Publish Your Code
Recommended
18 June 2023
Simple Login Form
25 August 2024
Login form
8 May 2025
scan button
HTML
Copy
Login and Signup
Login
Signup
Login
Login
Signup
Signup
CSS
Copy
/* Replace with your CSS Code (Leave empty if not needed) */ * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: Arial, sans-serif; background-color: white; display: flex; justify-content: center; align-items: center; height: 100vh; } .container { width: 300px; background-color: white; padding: 20px; border-radius: 10px; box-shadow: 0 0 15px rgba(0, 0, 0, 0.2); position: relative; overflow: hidden; } .form-container { position: relative; } .form { display: none; animation: slide-in 0.5s ease; } .form h2 { color: orange; margin-bottom: 10px; } input { width: 100%; padding: 10px; margin: 10px 0; border: 1px solid orange; border-radius: 5px; } button { width: 100%; padding: 10px; border: none; background-color: orange; color: white; border-radius: 5px; cursor: pointer; } button:hover { background-color: darkorange; } .button-box { display: flex; justify-content: space-between; margin-bottom: 10px; } .toggle-btn { background-color: white; border: 1px solid orange; padding: 10px; cursor: pointer; transition: background-color 0.3s; } .toggle-btn:hover { background-color: orange; color: white; } @keyframes slide-in { from { opacity: 0; transform: translateX(100%); } to { opacity: 1; transform: translateX(0); } }
JS
Copy
/* Replace with your JS Code (Leave empty if not needed) */ document.getElementById("loginForm").style.display = "block"; // Show login form by default function showLogin() { document.getElementById("loginForm").style.display = "block"; document.getElementById("signupForm").style.display = "none"; } function showSignup() { document.getElementById("signupForm").style.display = "block"; document.getElementById("loginForm").style.display = "none"; }