3.7K
Neumorphism sign up form with social media
I hope techmidpoint tutorials further help your web development learning process. I apologize for the lack of time for regular updates. In today’s tutorial, I am going to show you how to create a Neumorphism sign up form with social media.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Neomorphic Form</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css2?family=Lato:ital,wght@1,900&display=swap" rel="stylesheet">
</head>
<body>
<form>
<div class="segment">
<h1>Sign up</h1>
</div>
<label>
<input type="text" placeholder="Your Name"/>
</label>
<label>
<input type="text" placeholder="Email Address"/>
</label>
<label>
<input type="password" placeholder="Password"/>
</label>
<button class="red" type="button"> Join Now</button><br>
<button class="red" type="button"> You Can Log in With</button>
<div class="segment">
<button class="unit" type="button"><i class="fa fa-facebook"></i></button>
<button class="unit" type="button"><i class="fa fa-google"></i></button>
<button class="unit" type="button"><i class="fa fa-linkedin"></i></button>
</div>
</form>
</body>
</html>
CSS
body {
background-color: #ebecf0;
justify-content: center;
align-items: center;
height: 100vh;
display: flex;
}
body, p, input, select, textarea, button {
font-family: 'Lato', sans-serif;
letter-spacing: -0.2px;
font-size: 16px;
}
div, p {
color: #babecc;
text-shadow: 1px 1px 1px #fff;
}
form {
padding: 16px;
width: 320px;
margin: 0 auto;
border-radius: 20px;
box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff;
}
.segment {
padding: 10px 0;
text-align: center;
color:#61677c;
}
button, input {
border: 0;
outline: 0;
font-size: 16px;
border-radius: 320px;
padding: 16px;
background-color: #ebecf0;
text-shadow: 1px 1px 0 #fff;
}
label {
display: block;
margin-bottom: 24px;
width: 100%;
}
input {
margin-right: 8px;
box-shadow: inset 2px 2px 5px #babecc, inset -5px -5px 10px #fff;
width: 100%;
box-sizing: border-box;
transition: all 0.2s ease-in-out;
appearance: none;
-webkit-appearance: none;
}
input:focus {
box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #fff;
}
button {
color: #61677c;
font-weight: bold;
box-shadow: -5px -5px 20px #fff, 5px 5px 20px #babecc;
transition: all 0.2s ease-in-out;
cursor: pointer;
font-weight: 600;
}
button:hover {
box-shadow: -2px -2px 5px #fff, 2px 2px 5px #babecc;
}
button:active {
box-shadow: inset 1px 1px 2px #babecc, inset -1px -1px 2px #fff;
}
button .icon {
margin-right: 8px;
}
button.unit {
border-radius: 8px;
line-height: 0;
width: 48px;
height: 48px;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 8px;
font-size: 19.2px;
}
button.unit .icon {
margin-right: 0;
}
button.red {
display: block;
width: 100%;
color: #ae1100;
}
For More Tutorials Please Click Here
