Home Web Design CSS Neumorphism Login/Register Form Design | Switch Between Forms

Neumorphism Login/Register Form Design | Switch Between Forms

August 8, 2020

15827

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.

https://webdevtrick.com/wp-content/uploads/neumorphism-login-ui.mp4?_=1

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.

Neumorphism Login/Register Form Design Source Code

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.

<!DOCTYPE html>
<!--Code By Webdevtrick ( https://webdevtrick.com )-->
<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Neumorphism Login/Registration Form | Webdevtrick.com</title>
  <link rel="stylesheet" href="style.css">

</head>
<body>

    <div class="main">
      <div class="container a-container" id="a-container">
        <form class="form" id="a-form" method="" action="">
          <h2 class="form_title title">Create Account</h2>

          <div class="form__icons">
            <img class="form__icon" src="https://webdevtrick.com/wp-content/uploads/facebook.svg" alt="">
            <img class="form__icon" src="https://webdevtrick.com/wp-content/uploads/twitter.svg">
            <img class="form__icon" src="https://webdevtrick.com/wp-content/uploads/linkedin.svg"></div>
            <span class="form__span">or use email for registration</span>

          <input class="form__input" type="text" placeholder="Name">
          <input class="form__input" type="text" placeholder="Email">
          <input class="form__input" type="password" placeholder="Password">
          <button class="form__button button submit">SIGN UP</button>
        </form>
      </div>
      <div class="container b-container" id="b-container">
        <form class="form" id="b-form" method="" action="">
          <h2 class="form_title title">Sign in to Website</h2>

          <div class="form__icons">
            <img class="form__icon" src="https://webdevtrick.com/wp-content/uploads/facebook.svg" alt="">
            <img class="form__icon" src="https://webdevtrick.com/wp-content/uploads/twitter.svg">
            <img class="form__icon" src="https://webdevtrick.com/wp-content/uploads/linkedin.svg"></div>
            <span class="form__span">or use your email account</span>

          <input class="form__input" type="text" placeholder="Email">
          <input class="form__input" type="password" placeholder="Password"><a class="form__link">Forgot your password?</a>
          <button class="form__button button submit">SIGN IN</button>
        </form>
      </div>
      <div class="switch" id="switch-cnt">
        <div class="switch__circle"></div>
        <div class="switch__circle switch__circle--t"></div>
        <div class="switch__container" id="switch-c1">
          <h2 class="switch__title title">Welcome Back !</h2>
          <p class="switch__description description">To keep connected with us please login with your personal info</p>
          <button class="switch__button button switch-btn">SIGN IN</button>
        </div>
        <div class="switch__container is-hidden" id="switch-c2">
          <h2 class="switch__title title">Hello Friend !</h2>
          <p class="switch__description description">Enter your personal details and start journey with us</p>
          <button class="switch__button button switch-btn">SIGN UP</button>
        </div>
      </div>
    </div>

  <script  src="function.js"></script>

</body>
</html>

<!DOCTYPE html>

<head>

<title>Neumorphism Login/Registration Form | Webdevtrick.com</title>

</head>

<body>

<h2 class="form_title title">Create Account</h2>

<span class="form__span">or use email for registration</span>

</form>

</div>

<h2 class="form_title title">Sign in to Website</h2>

<span class="form__span">or use your email account</span>

<input class="form__input" type="password" placeholder="Password"><a class="form__link">Forgot your password?</a>

</form>

</div>

<h2 class="switch__title title">Welcome Back !</h2>

<p class="switch__description description">To keep connected with us please login with your personal info</p>

</div>

<h2 class="switch__title title">Hello Friend !</h2>

<p class="switch__description description">Enter your personal details and start journey with us</p>

</div>

</body>

</html>

style.css

Now create a CSS file named ‘style.css‘ and put all these codes given below.

/* 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;
  }
}

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.

// 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);

// 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.

6 COMMENTS

Hans February 1, 2021 At 3:52 am

Very nice,
he only thing is, it’s not responsible.

But great clear design.

Regards from Germany

Reply
Harish February 10, 2021 At 7:41 am

great work bro

Reply
foolishdeveloper.com August 24, 2021 At 8:07 am

Very Good Design

Reply
Jim Turner October 16, 2021 At 7:17 pm

Looks nice, but when I try to insert the Neumorphism code in middle of an existing page … the whole page is messed up. Doesn’t make any difference where I place the style css or the javascript.

(page header html code here etc ..)

“Neumorphism Login/Register Form Design | Switch Between Forms” code here

(page footer html code here etc …)

Any ideas?

Reply
Bayar December 10, 2021 At 1:31 pm

greate work thanks bro can you let me to used my webpage ?!!!!!!!!

Reply
Daniel October 23, 2022 At 1:22 pm

Greetings to you sir,I am glad to come across your source code for web development projects,I must commend you. The neumorphism form login project is not responding when I click for switching of forms. Please could you take a look at it to help debug it. waiting for your response, thanks.
If anyone has fixed the bug, kindly let me how you did it please.

Reply