Hello Dear Readers, Today In this Post, You will learn How to Create a Neumorphism Login Form UI Design Using HTML, CSS & JavaScript. Earlier I have shared a Complete Responsive Website Using Bootstrap 4, HTML & CSS. And now it’s time to Neumorphism Login Form UI Design Using HTML, CSS & JavaScript.

If you are trying to make your project attractive so you are in right place, I am here to show you the way you can create your Neumorphism Login Form UI Design. Brief Neumorphism Login Form UI Design is perfect for video intros.

On the webpage, there’s an awesome UI design as you can see in the below images. If you’re feeling difficult to understand what I am saying. You can watch a full video tutorial on this program.

I’m gonna go ahead and say that Neumorphism Login Form UI Design is complicated enough of a UI component that it uses CSS pseudo-classes. I’d also say that you can get pretty far with a nice looking UI Design with HTML and CSS. Starting that way makes the CSS Effected easier and, dare I say, a decent example of progressive enhancement.

I am sure that you know what is the Neumorphism Login Form UI Design. Maybe you have seen before, a Neumorphism Login Form UI Design on some webpages or forms that create a Neumorphism Login Form UI Design Mostly these types of buttons uses in the login form design. But If you add this type of button design, then your website will more attractive. Now question is that, how can we create this in coding? on webpage.

Play Video

Yes, you can create this program after visiting this post. So, today I am sharing the Neumorphism Login Form UI Design. In other words, the Neumorphism Login Form UI Design in HTML CSS. The whole concept is based on the right colors. With CSS if you have good color knowledge then you can create this easily. Maybe you can create better.

If you like this program, and you want to use this on your websites, projects, and wherever you want then you have to do some basic changes on codes according to your website layout or this is enough good for you and you don’t need to change then you don’t need to change anything.

Catch your user’s attention with beautiful Neumorphism Login Form UI Design created with only CSS. Today’s tutorial will show you how to create Neumorphism Login Form UI Design using only HTML and CSS. Follow Use the -WebKit- and -Moz- vendor prefixes with this animation property. How to Create Glitch Effect With CSS ·

If you’re a beginner you can use this Awesome design in your project and websites. I believe this Ui design code will help you a lot. Or if you have some knowledge of Bootstrap 4 you can add some great design in this format and use it according to your requirements.

If you like this article and want to get source codes. You can easily get the source codes of this program. To get the source codes you just need to scroll down. You can use this program on your projects, websites, and HTML pages.

To create this article First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our channel. Do share the tutorial if you think it’s worth it.

HTML

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;800&display=swap" rel="stylesheet">
  </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 decoding="async" class="form__icon" src="images/facebook.svg" alt="facebook">
              <img decoding="async" class="form__icon" src="images/linkedin.svg" alt="linkedin">
              <img decoding="async" class="form__icon" src="images/twitter.svg" alt="twitter">
          </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 decoding="async" class="form__icon" src="images/facebook.svg" alt="facebook">
              <img decoding="async" class="form__icon" src="images/linkedin.svg" alt="linkedin">
              <img decoding="async" class="form__icon" src="images/twitter.svg" alt="twitter">
          </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__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>

CSS

*, *::after, *::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  user-select: none;
}

/* Generic */
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: 0.5;
  transition: 0.15s;
}
.form__icon:hover {
  opacity: 1;
  transition: 0.15s;
  cursor: pointer;
}
.form__input {
  width: 350px;
  height: 40px;
  margin: 4px 0;
  padding-left: 25px;
  font-size: 13px;
  letter-spacing: 0.15px;
  border: none;
  outline: none;
  font-family: "Montserrat", sans-serif;
  background-color: #ecf0f3;
  transition: 0.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: 0.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: #4B70E2;
  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: 0.25s;
}
.switch__button:active, .switch__button:focus {
  box-shadow: 2px 2px 6px #d1d9e6, -2px -2px 6px #f9f9f9;
  transform: scale(0.97);
  transition: 0.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;
  }
}

JS

//form js

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

Neumorphism Login Form UI Design Using HTML, CSS & JS.

HTML

CSS

JS

One thought on “Neumorphism Login Form UI Design Using HTML, CSS & JS.”

Leave a Reply Cancel reply

Responsive Food And Restaurant Website Using Bootstrap 5 | Bootstrap 5 Responsive Website Design

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)

Responsive Food And Restaurant Website Using Bootstrap 5 | Bootstrap 5 Responsive Website Design

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-3)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-2)

Food Delivery App using React and Bootstrap | Food Ordering Website Design (Part-1)