How to Create a Beautiful Material Design Login Form with HTML & CSS

Google’s Material Design concept seems to catch the attention of the majority of designers and developers. This might be due to the fact that it is created to ease user interaction and focus on a pleasant user experience.

In the guidelines, Google developers clearly state that material design is a visual language of good design and motion in the interface is meaningful and helps the user.

In the login form I am showing you today, those guidelines are applied in a common user interaction as logging in.

This is a simple example with two inputs required but the same principle can be applied in longer and more complicated forms where instant feedback is required for better user interaction.

I have this problem with a register forms on my mobile phone – I just forget what I am supposed to fill in as sometimes there is no clear feedback. For example, the forms with the placeholder – when you click inside the input box, the required info disappears and if you get a bit distracted – you have to go back and start all over.

With the form below, there is no such issue, as the required info (included as a placeholder) is displayed on the top of the input box and you know what is supposed to be filled in.

Have a look at the markup to see how it is done:

HTML

<form>
<h1>Material Design Login Form</h1>
<input placeholder="Username" type="text" required="">
<input placeholder="Password" type="password" required="">
<button>Submit</button>
</form>

CSS

h1 {
  height: 100px;
  width: 100%;
  font-size: 18px;
  background: #18aa8d;
  color: white;
  line-height: 150%;
  border-radius: 3px 3px 0 0;
  box-shadow: 0 2px 5px 1px rgba(0, 0, 0, 0.2);
}

form {
  box-sizing: border-box;
  width: 260px;
  margin: 100px auto 0;
  box-shadow: 2px 2px 5px 1px rgba(0, 0, 0, 0.2);
  padding-bottom: 40px;
  border-radius: 3px;
}
form h1 {
  box-sizing: border-box;
  padding: 20px;
}

input {
  margin: 40px 25px;
  width: 200px;
  display: block;
  border: none;
  padding: 10px 0;
  border-bottom: solid 1px #1abc9c;
  -webkit-transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
          transition: all 0.3s cubic-bezier(0.64, 0.09, 0.08, 1);
  background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 96%, #1abc9c 4%);
  background-position: -200px 0;
  background-size: 200px 100%;
  background-repeat: no-repeat;
  color: #0e6252;
}
input:focus, input:valid {
  box-shadow: none;
  outline: none;
  background-position: 0 0;
}
input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
  color: #1abc9c;
  font-size: 11px;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  visibility: visible !important;
}

button {
  border: none;
  background: #1abc9c;
  cursor: pointer;
  border-radius: 3px;
  padding: 6px;
  width: 200px;
  color: white;
  margin-left: 25px;
  box-shadow: 0 3px 6px 0 rgba(0, 0, 0, 0.2);
}
button:hover {
  -webkit-transform: translateY(-3px);
      -ms-transform: translateY(-3px);
          transform: translateY(-3px);
  box-shadow: 0 6px 6px 0 rgba(0, 0, 0, 0.2);
}
 
The magic happens in a few lines of code for the input:focus and input:valid. The CSS transform property plays a crucial role to achieve this little instant feedback effect.

input:focus::-webkit-input-placeholder, input:valid::-webkit-input-placeholder {
  color: #1abc9c;
  font-size: 11px;
  -webkit-transform: translateY(-20px);
          transform: translateY(-20px);
  visibility: visible !important;
}

Here is the form:

More Material Design Resources:
Materialize CSS – Framework based on Material Design
Photoshop/Illustrator Tutorial: Google Material Design for Apps

---

The form is created by Kennedy Hudson on cssdeck.com