Material

by Pranab Dey

HTML

<div class="form">
<fieldset>
<input type="text" class="text" id="namee" placeholder="namee"/>
<label for="namee">Enter Name</label>
</fieldset>
<fieldset>
<input type="email" class="email" id="email"/>
<label for="email">Enter Email</label>
</fieldset>
<button class="btn">
Submit
</button>
</div>

SCSS

.center{
  top: 50%; left: 50%; transform: translate(-50%,-50%);
}
fieldset{
  position: relative;
  border: 0;
  padding: 0;
}

.form{
  position: absolute;
  @extend .center;
input{
  border: 0px;
  width: 250px; height: 30px;
  border-bottom: 1px solid grey;
  font-size: 17px;
  background: linear-gradient(to right, blue 100%, transparent 100%, transparent) no-repeat;
  background-position: -260px 31px;
  padding-left: 5px; padding-right: 5px;
  transition: 0.5s ease;
  &+ label{
    color: #CD4B5B;
    left:2px;
    display: none;
    top: 3px;
    position: absolute;
    opacity: 0.6;
  }
  &:focus{
    border: 0px; outline: none;
    background-position: 0 30px;
    transition: 0.5s ease;
    & + label{
      left: -10px;
      opacity: 1;
    }
    &::placeholder{
      visibility: hidden; opacity: 0;
      transition: 0.2s ease;
    }
  }
}
}