WEBLEB
Home
Editor
Login
Pro
English
English
Français
Español
Português
Deutsch
Italiano
हिंदी
Login button
2010
logicalbug731
Open In Editor
Publish Your Code
Recommended
14 May 2025
Gradient Login Form HTML CSS
25 April 2023
Responsive Login Form
18 June 2023
Simple Login Form
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"; }