Membuat Form Login Keren dengan CSS3

Dalam membuat website desain adalah hal paling utama yang harus kita perhatikan, semakin menarik tampilan desain yang ditampilkan maka akan semakin bagus tentunya. Berbicara mengenai desain, kali ini saya akan berbagi sedikit referensi desain sebuah form inputan yakni bagaimana Membuat Form Login Keren dengan CSS3. simak langkah-langkah nya berikut ini.Dalam kasus ini saya membuat tampilan desain untuk contoh form login, tetapi kalian bisa modifikasi untuk inputan yang lain nya juga. Baik langsung saja kita mulai praktik membuat form login terlebih dahulu. Pertama kalian buat struktur form login berikut dengan sintak HTML.

<body>
  <form action="#" autocomplete="off">
    <fieldset>
      <input id="username" type="text" name="user" required>
      <label for="username">Username</label>
      <div class="after"></div>
    </fieldset>
    <fieldset>
      <input id="password" type="text" name="pass" required>
      <label for="password">Password</label>
      <div class="after"></div>
    </fieldset>
    <fieldset>
      <button>Login</button>
    </fieldset>
  </form>
</body>

Setelah struktur form login kalian buat, langkah selanjutnya adalah kita akan desain tampilan form diatas dengan sintak CSS3 agar terlihat lebih menarik dan tentunya lebih keren.

@import url('https://fonts.googleapis.com/css?family=Metamorphous');
body {
  font-size: 20px;  
  font-family: 'Metamorphous', cursive;
}

form {
  width: 300px;
  margin: 20px auto;
}

fieldset {
  position: relative;
  border: none;  
}

label {
  position: absolute;  
  top: 18px;
  color: #3498db;
  transform-origin: left;
  transition: all 0.3s ease;
  left: 25px;
}

input:focus ~ label {
  color: red;  
}

input:focus ~ label,
input:valid ~ label {
  top: -10px;
  transform: scale(0.6, 0.6);
}

input {
  font-size: 20px;  
  width: 100%;
  border: none;  
  margin-top: 10px;
}

input:focus {
  outline: none;
}

.after {
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, #3498db 50%, transparent 50%);
  background-color: #3498db;
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: all 0.6s ease;
}

input:focus ~ .after {
  background-position: 0 0;
}

button {
  position: relative;
  width: 100%;
  font-size: 20px;  
  line-height: 1.5;
  margin-top: 20px;
  padding: 2px 10px;
  color: rgba(0, 0, 0, 0.4);
  background: white;
  border: none;
  background: linear-gradient(to right, #3498db 50%, transparent 50%);
  background-color: #3498db;
  background-size: 200% 100%;
  background-position: 100% 0;
  transition: all 0.6s ease;
}

button:before {
  position: absolute;
  content: "Submit";
  top: 2px;
  bottom: 2px;
  left: 2px;
  right: 2px;
  display: block;
  background-color: white;
}

button:focus,
button:hover {
  outline: none;
  background-position: 0 0;
  color: red;
}

Setelah semua sintak diatas kalian ketikan, kemudian simpan file nya dan silahkan lihat hasilnya pada browser. Maka akan terlihat tampilan desain form yang sangat menarik.

Baiklah cukup sekian tutorial dan referensi mengenai bagaimana Membuat Form Login Keren dengan CSS3, semoga bermanfaat dan selamat mencoba 🙂

DEMO