Social Media UI button | CSS Tutorial

HTML Code
Create a login for using Input text for email and password, use a login button, signup and forget password links.
Below is HTML file Code.
<div class="login-container">
<div class="round-logo"></div>
<div class="title"> ACode </div>
<div class="login-title"> User Login </div>
<div class="form-container">
<div class="email">
<input type="email" name="email-input" placeholder="Email Id" />
</div>
<div class="password">
<input type="password" name="password-input" placeholder="password" />
</div>
<button class="login-btn"> Login </button>
<div class="other-links">
<a href="#">Forgot Password ?</a>
<span> OR </span>
<a href="#">Sign Up</a>
</div>
</div>
</div>
CSS Code
Below is CSS file Code.
.login-container {
width: 440px;
height: 600px;
box-shadow: rgb(213, 210, 208) 5px 5px 15px,
rgb(255, 255, 255) -5px -5px 15px;
border-radius: 50px;
padding: 30px 15px;
margin: 50px auto;
font-family: 'Roboto', sans-serif;
}
.round-logo {
width: 100px;
height: 100px;
background-size: cover;
border-radius: 50%;
margin: 0 auto;
box-shadow:
/*logo shadow*/
0px 0px 2px #ccc,
/*bottom right*/
8px 8px 15px #aaa,
/*top left*/
-8px -8px 15px #fff;
}
.title {
text-align: center;
font-size: 20px;
padding: 28px;
letter-spacing: 2px;
color: #333;
}
.login-title {
font-size: 20px;
color: #aaa;
text-align: center;
}
.form-container {
width: 100%;
padding: 35px 5px 35px 5px;
}
.form-container input {
border:none;
outline: none;
background: none;
font-size: 20px;
padding: 20px 5px;
}
.email, .password {
box-shadow: inset 10px 10px 20px #ccc,
inset -10px -10px 10px #fff;
margin-bottom: 30px;
padding-left: 20px;
padding-right: 20px;
border-radius: 25px;
}
.login-btn {
outline: none;
border: none;
width: 100%;
height: 50px;
font-size: 24px;
font-weight: 700;
background-color: #373f57;
color: #fff;
border-radius: 25px;
box-shadow: 2px 2px 4px #bbb,
-3px 3px 8px #fff;
cursor: pointer;
transition: 0.5s;
margin-top: 10px;
}
.login-btn:hover {
background-color: #66749e;
}
.other-links {
padding-top: 20px;
text-align: center;
}
.other-links a {
text-decoration: none;
color: #aaa;
font-size: 16px;
}
.other-links span {
color: #333;
}
Watch Below Video for Detail Understanding
Recent Blog
Instagram Post
Developer
concept
turquoise
Legacy
clear-thinking
Developer
Computers
payment
generation
Guinea Franc
Cheese
mindshare
Solutions