WEBLEB
Home
AI Editor
Chat
Login
Pro
English
English
Français
Español
Login Form with Social Login
8,165
0
Forms
webleb
Follow
0
Remix
Open In Editor
Fullscreen
Discuss
Publish Your Code
1
Recommended
29 August 2024
Animated Continuous Sections with GSAP Observer
10 August 2025
CSS Alien Spaceship Animation with Stars
23 August 2025
Turkish Login Page HTML Template
HTML
Copy
Webleb
Login
Email
Password
Connect with
CSS
Copy
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap"); body { background: #3f2b96; font-family: "Inter", "DM Sans", Arial, sans-serif; } form#login-form { background: #fff; width: 38em; margin: 2em auto; overflow: hidden; position: relative; border-radius: 0.3em; } form#login-form div.heading { background: #000000; color: #fff; text-align: center; text-transform: uppercase; font-weight: bold; padding: 1.5em; font-size: 1.1em; } form#login-form div.left { width: 50%; float: left; padding: 1.7em 1.5em 2.5em 1.5em; box-sizing: border-box; } div.left label { display: inline-block; color: gray; font-size: 1.1em; margin-top: 0.6em; } div.left input[type="email"], div.left input[type="password"] { border: 0.1em solid #dfdfdf; padding: 1em; margin: 0.6em 0; max-width: 88.5%; outline: none; border-radius: 5px; } div.left input[type="submit"] { background: #000000; color: #fff; outline: none; padding: 1em; overflow: hidden; border: none; letter-spacing: 0.1em; margin: 0.5em 0; border-radius: 0.4em; width: 50%; cursor: pointer; } button, input, optgroup, select, textarea { font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0; } button, hr, input { overflow: visible; } user agent stylesheet input:not([type="range"]):not([type="color"]) { writing-mode: horizontal-tb !important; } form#login-form div.right { width: 50%; float: right; padding: 1.7em 1.5em 2.5em 1.5em; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } div.right div.connect { color: gray; font-size: 1.1em; text-align: center; } div.right a.facebook { background: #3a589a; margin-top: 0.8em; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } div.right a.google { background: #d1231a; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } div.right a.github { background: #000000; -moz-transition: all 0.15s ease-in-out; -o-transition: all 0.15s ease-in-out; -webkit-transition: all 0.15s ease-in-out; transition: all 0.15s ease-in-out; } div.right a { display: inline-block; font-size: 1.5em; text-decoration: none; color: white; width: 9em; padding: 0.55em 0.3em; clear: both; text-align: center; margin: 0.5em 0.1em; -moz-border-radius: 0.3em; -webkit-border-radius: 0.3em; border-radius: 0.3em; } a { background-color: transparent; -webkit-text-decoration-skip: objects; }
JS
Copy
const buttonsComponent = document.querySelector('.buttons'); const buttonsToggle = document.querySelector('.buttons__toggle'); buttonsToggle.addEventListener('click', toggleButtons); function toggleButtons() { buttonsToggle.classList.toggle('buttons__toggle--active'); buttonsComponent.classList.toggle('buttons--active'); document.activeElement.blur(); }
Comments
0
Log in to join the discussion
…