Cara Membuat Animasi Login Dengan HTML CSS

Hallo sahabat dumet bertemu kembali dengan saya Edi, dalam kesempatan kali ini saya akan membahas tentang cara membuat animasi login dengan html css ,pada tutorial ini saya membuat animasi pada input saja.

Baiklah supaya tidak terlalu lama sekarang kita persiapkan dahulu file html ketikan sintax seperti dibawah ini:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Membuat Animasi Form Login Dengan HTML CSS</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
<form action="" method="" class="box">
  <h2>Login</h2>
  <input type="text" name="" placeholder="Username">
  <input type="password" name="" placeholder="Password">
  <input type="submit" name="" value="Login">
</form>
</body>
</html>

Langkah selanjutnya sahabat tinggal mengetikkan sintax css untuk mempercantik tampilan form login yang akan dibuat,silahkan sahabat ketikan seperti dibawah ini:

body{
  margin:0;
  padding: 0;
  font-family: sans-serif;
  background: url(coffe.jpg) no-repeat;
  background-size: cover;
}

.box{
  width: 300px;
  padding:40px;
  position: absolute;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  background: rgba(102, 76, 60,0.6);
  text-align: center;
  border-radius: 50%;
}

.box h2{
  color: #fff;
  text-transform: uppercase;
  font-weight: 600;
}

.box input[type="text"], .box input[type="password"]
{
  border: 0;
  background: none;
  width: 200px;
  display: block;
  text-align: center;
  border: 2px solid #00ffc7;
  padding: 15px 10px;
  margin: 20px auto;
  outline: none;
  color: #fff;
  border-radius: 25px;
  transition: 0.25s;
}
.box input[type="submit"]
{
  border: 0;
  background: none;
  display: block;
  margin: 20px auto;
  border: 2px solid #ff581c;
  padding: 15px 40px;
  outline: none;
  color: #fff;
  text-align: center;
  border-radius: 25px;
  transition: 0.25s;
  cursor: pointer;
}

.box input[type="submit"]:hover
{
  background:#ff581c;
}

Jika sudah sahabat ketikan dan jangan lupa save file html css yang sudah dibuat.lalu jalan pada broser masing-masing lihat seperti berikut tampilanya

Nah saya akan memberikan efek animasi pada bagian input username dan passwordÂ dengan menambahkan sedikit sintax pada CSS nya

sintax diatas memberikan efek pada input saat kita akan mengetikan username dan password akan menjadi lebih panjang form inputnya…

Saya kira cukup mudah bukan membuat efek animasinya, semoga bermanfaat dan bisa langsung dipraktekan ya sahabat, sampai jumpa pada artikel selanjutnya.

terima kasih

Cara Membuat Animasi Login Dengan HTML CSS

Kategori