How we can create a neumorphism login and register form using HTML CSS JS? Solution: See this Neumorphism Login/Register Form Design, Switch Between Two Forms.
Previously I have shared a neumorphism tab design, but this is a login and register form UI design. Basically, nowadays neumorphism designs are on-trend and it looks cool and futuristic, that’s why peoples using this design pattern. We can apply the design on many places like tab, accordions, dashboard, login-register form, etc. And this program is a combination of login and register form which switch on click with neumorphic design.
Today you will learn to create a switchable login and register form with neumorphic design. Basically, there are two types of forms one for sign in and one for sign up. And these two sections are divided in parts, one side has a login form and one side has a registration form. By default, you will see the form fields of registration, but when you will click on sign-in button then the from will slide and switch the section. When you will click on sign up again then it will slide again and show the section.
So, Today I am sharing Neumorphism Login/Register Form Design. There I have used HTML and CSS for creating and styling the program and JavaScript for functioning. There I have not used jQuery or any JS library, this is a pure javascript program. Then I have placed some SVG icons for social media presentation. The whole design is based on color and shadow combination, and its slide switch feature makes it cooler.
If you are thinking now how this Switch Between Forms program actually is, then see the preview given below.
Preview Of Sign In and Sign Up Form Interaction
See this video preview to getting an idea of how this neumorphism form design looks like.
Live Demo
Now you can see this visually, also you can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- Image Comparison Slide
- Covid 19 Real-Time Update
- Matrix Digital Rain
- jQuery Form Validation
Before sharing source code, let’s talk about it. First I have created the main div with class name ‘main’ and placed two container divs inside it for two form sections. The first container div contains sign up form fields contents, and the second one contains Log in fields and other things. I have placed many inputs and divs to create the whole structure. Also in the HTML file, I have linked CSS and JavaScript files.
Now using CSS, first I have placed all the items in the right place, as you can see in the preview. There I gave width, height, margin, padding, etc values. This is only a prototype, that’s the it is not responsive. But you can create it by our own. I have used CSS Flex display :flex; to create the sturcture. Now box-shadow and background-color commands are responsible for neumorphic design. Also, I gave transition delay which is managed by JS.
JavaScript handling here the switch functions. This is pure JS, there I have not used any JS library like jQuery or any other else. JS fetching all the elements using document.querySelector command and storing in let. There is have used JS let attribute for storing data and executing functions. Used .classList.toggle command for toggle function.
Left all other things you will understand after getting the codes, I can’t explain all in writing. For creating the program you have to create 3 files. One for HTML, one for CSS, and one for JavaScript. Follow the steps to creating this program without any error/trouble.
index.html
Create an HTML file named ‘index.html‘ and put these codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 |
lang=“en” >
charset=“UTF-8”> rel=“stylesheet” href=“style.css”>
class=“main”>
class=“container a-container” id=“a-container”>
class=“container b-container” id=“b-container”>
class=“switch” id=“switch-cnt”>
class=“switch__circle”>
class=“switch__circle switch__circle–t”>
class=“switch__container” id=“switch-c1”>
class=“switch__title title”>Welcome Back !
class=“switch__description description”>To keep connected with us please login with your personal info
class=“switch__container is-hidden” id=“switch-c2”>
class=“switch__title title”>Hello Friend !
class=“switch__description description”>Enter your personal details and start journey with us
|
style.css
Now create a CSS file named ‘style.css‘ and put all these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ *, *::after, *::before { margin: 0; padding: 0; box-sizing: border-box; user-select: none; } body { width: 100%; height: 100vh; display: flex; justify-content: center; align-items: center; font-family: ‘Montserrat’, sans-serif; font-size: 12px; background-color: #ecf0f3; color: #a0a5a8; } .main { position: relative; width: 1000px; min-width: 1000px; min-height: 600px; height: 600px; padding: 25px; background-color: #ecf0f3; box-shadow: 10px 10px 10px #d1d9e6, -10px -10px 10px #f9f9f9; border-radius: 12px; overflow: hidden; } .container { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; width: 600px; height: 100%; padding: 25px; background-color: #ecf0f3; transition: 1.25s; } .form { display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100%; } .form__icon { object-fit: contain; width: 30px; margin: 0 5px; opacity: .5; transition: .15s; } .form__icon:hover { opacity: 1; transition: .15s; cursor: pointer; } .form__input { width: 350px; height: 40px; margin: 4px 0; padding-left: 25px; font-size: 13px; letter-spacing: .15px; border: none; outline: none; font-family: ‘Montserrat’, sans-serif; background-color: #ecf0f3; transition: .25s ease; border-radius: 8px; box-shadow: inset 2px 2px 4px #d1d9e6, inset -2px -2px 4px #f9f9f9; } .form__input:focus { box-shadow: inset 4px 4px 4px #d1d9e6, inset -4px -4px 4px #f9f9f9; } .form__span { margin-top: 30px; margin-bottom: 12px; } .form__link { color: #181818; font-size: 15px; margin-top: 25px; border-bottom: 1px solid #a0a5a8; line-height: 2; } .title { font-size: 34px; font-weight: 700; line-height: 3; color: #181818; } .description { font-size: 14px; letter-spacing: .25px; text-align: center; line-height: 1.6; } .button { width: 180px; height: 50px; border-radius: 25px; margin-top: 50px; font-weight: 700; font-size: 14px; letter-spacing: 1.15px; background-color: #ff003d; color: #f9f9f9; box-shadow: 8px 8px 16px #d1d9e6, -8px -8px 16px #f9f9f9; border: none; outline: none; } .a-container { z-index: 100; left: calc(100% – 600px ); } .b-container { left: calc(100% – 600px ); z-index: 0; } .switch { display: flex; justify-content: center; align-items: center; position: absolute; top: 0; left: 0; height: 100%; width: 400px; padding: 50px; z-index: 200; transition: 1.25s; background-color: #ecf0f3; overflow: hidden; box-shadow: 4px 4px 10px #d1d9e6, -4px -4px 10px #f9f9f9; } .switch__circle { position: absolute; width: 500px; height: 500px; border-radius: 50%; background-color: #ecf0f3; box-shadow: inset 8px 8px 12px #d1d9e6, inset -8px -8px 12px #f9f9f9; bottom: -60%; left: -60%; transition: 1.25s; } .switch__circle–t { top: -30%; left: 60%; width: 300px; height: 300px; } .switch__container { display: flex; justify-content: center; align-items: center; flex-direction: column; position: absolute; width: 400px; padding: 50px 55px; transition: 1.25s; } .switch__button { cursor: pointer; } .switch__button:hover { box-shadow: 6px 6px 10px #d1d9e6, -6px -6px 10px #f9f9f9; transform: scale(0.985); transition: .25s; } .switch__button:active, .switch__button:focus { box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9; transform: scale(0.97); transition: .25s; } .is-txr { left: calc(100% – 400px ); transition: 1.25s; transform-origin: left; } .is-txl { left: 0; transition: 1.25s; transform-origin: right; } .is-z200 { z-index: 200; transition: 1.25s; } .is-hidden { visibility: hidden; opacity: 0; position: absolute; transition: 1.25s; } .is-gx { animation: is-gx 1.25s; } @keyframes is-gx { 0%, 10%, 100% { width: 400px; } 30%, 50% { width: 500px; } } |
function.js
The last step, Create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
// Code By Webdevtrick ( https://webdevtrick.com ) let switchCtn = document.querySelector(“#switch-cnt”); let switchC1 = document.querySelector(“#switch-c1”); let switchC2 = document.querySelector(“#switch-c2”); let switchCircle = document.querySelectorAll(“.switch__circle”); let switchBtn = document.querySelectorAll(“.switch-btn”); let aContainer = document.querySelector(“#a-container”); let bContainer = document.querySelector(“#b-container”); let allButtons = document.querySelectorAll(“.submit”); let getButtons = (e) => e.preventDefault() let changeForm = (e) => { switchCtn.classList.add(“is-gx”); setTimeout(function(){ switchCtn.classList.remove(“is-gx”); }, 1500) switchCtn.classList.toggle(“is-txr”); switchCircle[0].classList.toggle(“is-txr”); switchCircle[1].classList.toggle(“is-txr”); switchC1.classList.toggle(“is-hidden”); switchC2.classList.toggle(“is-hidden”); aContainer.classList.toggle(“is-txl”); bContainer.classList.toggle(“is-txl”); bContainer.classList.toggle(“is-z200”); } let mainF = (e) => { for (var i = 0; i < allButtons.length; i++) allButtons[i].addEventListener(“click”, getButtons ); for (var i = 0; i < switchBtn.length; i++) switchBtn[i].addEventListener(“click”, changeForm) } window.addEventListener(“load”, mainF); |
That’s It. Now you have successfully created Neumorphism Login/Register Form Design, Switch Between Forms Program. If you have any doubt or questions comment down below.
Thanks For Visiting, Keep Visiting.
