Home » Neumorphism sign up form with social media

Neumorphism sign up form with social media

by techmidpoint
Neumorphism sign up form with social media

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

You may also like

Leave a Comment