Neumorphism Log In & Registration Form

Neumorphism Login & Registration Form Created With Html,Css & Javascript:-

-----------------------------------------------------------------------------------------------------------------------------

Hello friends, as you know that we upload many coding projects, that too for free so that you can learn coding easily. Let us discuss the topic of today's coding project. If you want to create project html and css as shown in the image above then copy the code below and paste it on your code runner.

-----------------------------------------------------------------------------------------------------------------------------

Input:-

<html>

<head>

<title>Neumorphism Login & Registration Form</title>

</head>

<body>

<button type="button" class="toggle-btn" onclick="register()">Register</button>

</div>

<b>

<button class="icons"><img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA1MTIgNTEyIj48IS0tIEZvbnQgQXdlc29tZSBGcmVlIDUuMTUuMyBieSBAZm9udGF3ZXNvbWUgLSBodHRwczovL2ZvbnRhd2Vzb21lLmNvbSBMaWNlbnNlIC0gaHR0cHM6Ly9mb250YXdlc29tZS5jb20vbGljZW5zZS9mcmVlIChJY29uczogQ0MgQlkgNC4wLCBGb250czogU0lMIE9GTCAxLjEsIENvZGU6IE1JVCBMaWNlbnNlKSAtLT48cGF0aCBkPSJNNDU5LjM3IDE1MS43MTZjLjMyNSA0LjU0OC4zMjUgOS4wOTcuMzI1IDEzLjY0NSAwIDEzOC43Mi0xMDUuNTgzIDI5OC41NTgtMjk4LjU1OCAyOTguNTU4LTU5LjQ1MiAwLTExNC42OC0xNy4yMTktMTYxLjEzNy00Ny4xMDYgOC40NDcuOTc0IDE2LjU2OCAxLjI5OSAyNS4zNCAxLjI5OSA0OS4wNTUgMCA5NC4yMTMtMTYuNTY4IDEzMC4yNzQtNDQuODMyLTQ2LjEzMi0uOTc1LTg0Ljc5Mi0zMS4xODgtOTguMTEyLTcyLjc3MiA2LjQ5OC45NzQgMTIuOTk1IDEuNjI0IDE5LjgxOCAxLjYyNCA5LjQyMSAwIDE4Ljg0My0xLjMgMjcuNjE0LTMuNTczLTQ4LjA4MS05Ljc0Ny04NC4xNDMtNTEuOTgtODQuMTQzLTEwMi45ODV2LTEuMjk5YzEzLjk2OSA3Ljc5NyAzMC4yMTQgMTIuNjcgNDcuNDMxIDEzLjMxOS0yOC4yNjQtMTguODQzLTQ2Ljc4MS01MS4wMDUtNDYuNzgxLTg3LjM5MSAwLTE5LjQ5MiA1LjE5Ny0zNy4zNiAxNC4yOTQtNTIuOTU0IDUxLjY1NSA2My42NzUgMTI5LjMgMTA1LjI1OCAyMTYuMzY1IDEwOS44MDctMS42MjQtNy43OTctMi41OTktMTUuOTE4LTIuNTk5LTI0LjA0IDAtNTcuODI4IDQ2Ljc4Mi0xMDQuOTM0IDEwNC45MzQtMTA0LjkzNCAzMC4yMTMgMCA1Ny41MDIgMTIuNjcgNzYuNjcgMzMuMTM3IDIzLjcxNS00LjU0OCA0Ni40NTYtMTMuMzIgNjYuNTk5LTI1LjM0LTcuNzk4IDI0LjM2Ni0yNC4zNjYgNDQuODMzLTQ2LjEzMiA1Ny44MjcgMjEuMTE3LTIuMjczIDQxL

jU4NC04LjEyMiA2MC40MjYtMTYuMjQzLTE0LjI5MiAyMC43OTEtMzIuMTYxIDM5LjMwOC01Mi42MjggNTQuMjUzeiIvPjwvc3ZnPg=="></button>

</div>

</div>

</form>

</div>

</form>

</div>

var x=document.getElementById("login");

var y=document.getElementById("register");

var z=document.getElementById("btn");

function register(){

x.style.left = "-400px";

y.style.left = "50px";

z.style.left = "110px";

}

function login(){

x.style.left = "50px";

y.style.left = "450px";

z.style.left = "0px";

}

</script>

<div class="footer"><p class="footer-text">Created By <a href="https://wbpscode.blogspot.com" class="footer-link">WBPS Code</a>

</div>

</body>

<style>

margin: 0;

padding: 0

}

.zero{

height: 100%;

width: 100%;

color:#555;

background: #ecf0f3;

position: absolute;

}

.form-box{

width:420px;

height: 450px;

border-radius: 20px;

background: #ecf0f3;

box-shadow: 13px 13px 20px #cbced1,

-13px -13px 20px #ffffff;

position: relative;

margin: 6% auto;

padding: 5px;

overflow: hidden;

}

.buttons{

width: 300px;

margin: -30px 25px 0 80px;

padding: 10px 0;

}

.button-box{

width: 220px;

margin: 35px auto;

margin-left: 80px;

position: relative;

box-shadow: 0 0 20px 9px #ff61241f;

border-radius: 30px;

isolation: isolate;

overflow: hidden;

box-shadow:

-8px -4px 8px 0px #ffffff,

8px 4px 12px 0px #d1d9e6,

4px 4px 4px 0px #d1d9e6 inset,

-4px -4px 4px 0px #ffffff inset;

}

.toggle-btn{

padding: 10px 30px;

cursor: pointer;

background: transparent;

border: 0;

outline: none;

position: relative;

}

#btn{

top: 0;

left: 0;

position: absolute;

overflow: hidden;

height: 100%;

width: 50%;

background: #ecf0f3;

border-radius: 15px;

transform: translate3d(-75%, 0, 0);

transition: .5s;

box-shadow:

-8px -4px 8px 0px #ffffff,

8px 4px 12px 0px #d1d9e6;

margin:0px 25px 0 80px;

}

.icons{

width: 58px;

height: 55px;

margin: 5px;

line-height: 55px;

border-radius: 3px;

border: 2px solid #d9d9d9;

background: #ecf0f3;

box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),

-6px -6px 10px -1px rgba(255,255,255,0.7);

border: 1px solid rgba(0,0,0,0);

transition: transform 0.5s;

}

.icons:hover{

transition: .5s;

background: #cbced1;

box-shadow: inset 4px 4px 6px -1px rgba(0,0,0,0.2),

inset -4px -4px 6px -1px rgba(255,255,255,0.7),

-0.5px -0.5px 0px rgba(255,255,255,1),

0.5px 0.5px 0px rgba(0,0,0,0.15),

0px 12px 10px -10px rgba(0,0,0,0.05);

border: 1px solid rgba(0,0,0,0.01);

transform: translateY(2px);

}

.icons img{

width:30px;

}

.input-group{

top: 180px;

position: absolute;

width: 280px;

transition: .5s;

}

.input-fields{

width: 300px;

}

.input-fields input {

border: none;

outline:none;

background: none;

font-size: 12px;

color: #555;

padding:15px 5px 10px 2px;

}

.username, .password {

margin-bottom: 15px;

border-radius: 25px;

box-shadow: inset 8px 8px 8px #cbced1,

inset -8px -8px 8px #ffffff;

}

.input-fields svg {

height: 25px;

margin:0 10px -3px 25px;

}

#login{

left: 50px;

}

#register{

left: 450px;

}

.submit{

outline: none;

border:none;

cursor: pointer;

width: 80%;

height: 40px;

border-radius: 29.9px;

font-size: 15px;

font-weight: 699.9;

font-family: monospace;

color:#fff;

text-align: center;

background: #24cfaa;

box-shadow: 3px 3px 8px #b1b1b1,

-3px -3px 8px #ffffff;

transition: 0.5s;

margin: 15px 0px 0px 35px;

}

.submit:hover{

background: #fa0879;

}

.footer{

position: fixed;

left: 0;

bottom: 0;

width: 100%;

margin: 10px 0 10px 0;

font-size: 20px;

text-align:center;

color: white;

box-shadow: 6px 6px 10px -1px rgba(0,0,0,0.15),

-6px -6px 10px -1px rgba(255,255,255,0.7);

border: 1px solid rgba(0,0,0,0);

transition: transform 0.5s;

background: #fa6060 ;

border: 1px solid #fa6060;

}

.footer:hover{

background-color: #24cfaa;

}

.footer-text{

margin: 10.1px 0;

font-family: sans-serif;

}

.footer-link{

color: #ffffff;

text-decoration: none;

margin-right:5px;

}

.footer-link:hover{

color:#ff009d;

}

</style>

</html>

-----------------------------------------------------------------------------------------------------------------------------

If you want input of any other project, then visit our website and if any project which you think should be in our website, then comment and if you want to share your project with us, then email=(goldenstarofpriyanshu@gmail.com) it to us.

Let us tell you that when you send your project to us, then send a screenshot of the project with it and send a photo and name along with it that you want to show to the public.

-----------------------------------------------------------------------------------------------------------------------------

Published By:-

WBPS Code(Priyanshu Kumar)

WBPS Code

Recent-Post

WBPS Code

Neumorphism Log In & Registration Form

Input:-

Post a Comment

0 Comments

Popular Posts

Neumorphism Login Form

Happy Birthday 3d Card