Login Form with Glassmorphism Effect and Floating Labels

#html #css #codepen #beginners

Hello world!

I am back with a new post, in this one we are going to make a Login Form that will have Glassmorphism Effect with Floating Labels.

Prerequisites:

You just need basic knowledge of HTML and CSS to make this!

Now let us get started!

Our Boiler Plate👇

<!DOCTYPE>
<html>
  <head>
    <title>Login form</title>
  </head>
 <body>
<!--Our code will go here-->
</body>
</html>

We will make a div with container class and our Form will go inside this container. Let's see our container and form!

2.Our Main HTML

 <div class="container">
    <div class="form">
      <h3 class="title">Login to Fitness Champ</h3>
      <form>
        <div class="form-group">
          <input type="text" required/><label>Username</label>
        </div>
        <div class="form-group">
          <input type="password" required/><label>Password</label>
        </div>
        <input type="button" value="Sign In" class="submit"> 
        <div class="row">
          <p>Not Yet Registered? <a href="#">Sign Up</a></p>
        </div>
      </form>
    </div>
    <div class="last">
      <a href="#">T&C</a>
      <a href="#">Policy</a>
    </div>
  </div>

We have made a Login Form, now it's time to style it with CSS!
3.Styling our Page

html{
  font-family:sans-serif;
} 
body{
      background: url(your_image.png); /*Any Image or color*/
    color: white;
    background-size: cover;
}

4.Styling our container and Form

.container{
    width: 330px;
    margin: auto;
    margin-top: 10%;
    padding: 5px;
    backdrop-filter: blur(17px) saturate(200%);
    -webkit-backdrop-filter: blur(17px) saturate(200%);
    background-color: rgba(190, 190, 190, 0.44);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.125);
    border-radius: 10px;
}
.title{
  text-align: center;
    color: #b82800;
    font-weight: 400;
}
.form{
  padding: 15px;
}
.form-group {
position: relative;
padding: 20px 0;
margin: auto;
max-width: 100%;
}

.form-group input {
background-color: transparent;
border: none;
border-bottom: 1.4px solid #d8d7d7;
font-size: 18px;
padding: 10px 0;
display: block;
width: 100%;
}

.form-group label {
color: #f0eaea;
font-size: 16px;
font-weight: 100;
position: absolute;
pointer-events: none;
top: 0;
transform: translateY(30px);
transition: all 0.2s ease-in-out;
left: 0px;
}

.form-group input:valid,
.form-group input:focus {
border-bottom-color: #dddddd;
outline: none;
}

.form-group input:valid + label,
.form-group input:focus + label {
color: rgb(247, 247, 247);
font-size: 14px;
transform: translateY(0);
}
.submit{
  background: rgb(218 51 3);
    padding: 7px 0;
    outline: none;
    font-size: 18px;
    width: 100%;
    margin: 17px 0;
    cursor: pointer;
    color: rgb(226, 224, 224);
    border-radius: 5px;
    transition: 0.1s;
    border: 1px solid rgb(218 51 3);
}
.submit:hover{
  background: rgba(216, 214, 214, 0.301);
  color: rgb(218 51 3);
}
a{ /*globally*/
  text-decoration: none;
}
.row a{
  color: rgb(218 51 3);
}
a:hover{ /*For all links*/
  color: white;
}
.last{
  text-align: center;
    padding: 5px;
}
.last a{
  margin: 0 10px;
  font-size: 14px;
  color: #66C1E5;
}