Membuat Desain Login Material dengan CSS3

Berbicara mengenai website, desain merupakan hal paling penting yang harus kita perhatikan, apalagi saat ini sudah banyak sekali teknologi untuk menunjang suatu tampilan web menjadi lebih menarik untuk kita lihat. Seperti yang kita ketahui bahwa saat ini teknologi untuk penunjang desain web adalah CSS3, Javascript, ataupun Jquery. Nah, berikut ini ada satu referensi desain login untuk sebuah web yang sangat menarik sekali, yakni desain login material. Seperti apa tampilan desain login nya, simak selengkapnya berikut ini.
Pada contoh desain login ini saya akan kasih tutorialnya seperti berikut ini.
Pertama-tama silahkan kalian ketikan kode HTML5 berikut sebagai struktur awal desain login nya.

<body>
    <div class="container">
      <div class="sub">
        <label for="user" class="label">Username</label>
        <input type="text" class="input" id="user">
      </div>
      
        <div class="sub">
        <label for="pass" class="label">Password</label>
        <input type="text" class="input" id="pass">
      </div>
        <button>Login</button>
    </div>
</body>

Setelah selesai membuat struktur seperti diatas, langkah selanjutnya adalah kita desain tampilan login dengan kode CSS3 berikut ini.

body {
  background-color: #2c3e50;
}

body * {
  font-family: 'Montserrat' sans-serif;
}

.container {
  width: 450px;
  margin: 0 auto;
}

.label {
  display: block;
  font-size: 16px;
  transform: translateY(25px);
  color: #e2e2e2;
  transition: all 0.5s;
}

.input {
  position: relative;
  background: transparent;
  width: 100%;
  border: none;
  outline: none;
  padding: 8px 0;
  font-size: 16px;
}

.sub {
  padding: 30px 0 0 0;
  position: relative;
}

.sub:after, .sub:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: 2px;
  background-color: #e2e2e2;
  bottom: 0;
  left: 0;
  transition: all 0.5s;
}

.sub::after {
  background-color: #d35400;
  transform: scaleX(0);
}

.aktif::after {
  transform: scaleX(1);
}

.aktif .label {
  color: #d35400;
}

.komplit .label {
  font-size: 12px;
  transform: translateY(0);
}

button {
  background-color: #d35400;
  border: none;
  display: block;
  margin: 35px auto;
  padding: 15px 30px;
  cursor: pointer;
}

Berikut nya adalah, kita tampbahkan kode Jquery berikut ini untuk membuat efek pada tampilan login nya.

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    $(".input").focus(function(){
      $(this).parent().addClass("aktif komplit");
    });

    $(".input").focusout(function(){
      if($(this).val() === "")
        $(this).parent().removeClass("komplit");
      $(this).parent().removeClass("aktif");
    })
</script>

Nah, setelah semua kode diatas diketikan, simpan file nya kemudian silahkan buka pada browser masing-masing dan lihat hasilnya, maka akan tampil desain login seperti gambar dibawah ini.

Membuat Desain Login Material dengan CSS3

Jika kita klik pada kolom user dan password akan terlihat efek yang ditampilkan. Selesai
Baiklah, cukup sekian artikel mengenai referensi desain login material sederhana dengan menggunakan CSS dan Jquery, semoga bermanfaat dan selamat mencoba.

12 Oktober 2017

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat