WEBLEB
Home
AI Editor
Login
Pro
English
English
Français
Español
Bootstrap Responsive Register Form
11,295
webleb
Open In Editor
Publish Your Code
0
Recommended
6 June 2023
Login/Register Form
17 May 2024
Animated home and registration login form
10 February 2025
CSS Login Form
HTML
Copy
Webleb
Sign Up
Username
Email
Phone number
Password
Register
CSS
Copy
body { background-color: #071014; background-image: -webkit-linear-gradient(160deg, #071014 0%, #0db8de 100%); background-image: -moz-linear-gradient(160deg, #071014 0%, #0db8de 100%); background-image: -o-linear-gradient(160deg, #071014 0%, #0db8de 100%); background-image: linear-gradient(160deg, #071014 0%, #0db8de 100%); font-family: 'Arial', sans-serif; height: 100vh; } .login-box { margin-top: 75px; background: #1A2226; text-align: center; box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23); border-radius: 15px; } .login-title { text-align: center; font-size: 30px; letter-spacing: 2px; margin-top: 35px; font-weight: bold; color: #0DB8DE; } .login-form { margin-top: 25px; text-align: left; } input[type=text] { background-color: #1A2226; border: none; border-bottom: 2px solid #0DB8DE; border-top: 0px; border-radius: 0px; outline: 0; margin-bottom: 20px; padding-left: 0px; color: #ECF0F5; } input[type=password] { background-color: #1A2226; border: none; border-bottom: 2px solid #0DB8DE; border-radius: 0px; margin-bottom: 20px; color: #ECF0F5; } .form-group { margin: 30px; } .form-control:focus { box-shadow: none; background-color: #1A2226; color: #ECF0F5; } .form-control-label { font-size: 15px; color: #6C6C6C; letter-spacing: 1px; } .btn-outline-primary { width: 200px; height: 50px; border-radius: 15px; cursor: pointer; border-color:#0DB8DE!important; color:#0DB8DE; margin-top: 30px; } .btn-outline-primary:hover{ background-color: #071014!important; background-image: -webkit-linear-gradient(160deg, #071014 0%, #0db8de 100%)!important; background-image: -moz-linear-gradient(160deg, #071014 0%, #0db8de 100%)!important; background-image: -o-linear-gradient(160deg, #071014 0%, #0db8de 100%)!important; background-image: linear-gradient(160deg, #071014 0%, #0db8de 100%)!important; color: #ffffff!important; } .login-button { padding-right: 0px; text-align: right; margin-bottom: 25px; } .login-text { padding-left: 0px; color: #A2A4A4; }
JS
Copy