Form login dan registrasi animasi

Source code nya bisa disalin disini...!

Pertama buat dulu file baru di kode editornya.. dan jangan lupa siapkan folder yang berisi gambar buat background nya...

1. Buat file dengan nama index.html

index.html

<!DOCTYPE html>

<html>

<head>

<title>Form Login dan Registrasi</title>

<link rel="stylesheet" type="text/css" href="style.css">

</head>

<body>

<div class="halaman">

<div class="kotak-form">

<div class="kotak-tombol">

<div id="btn"></div>

<button type="button" class="toggle-btn" onclick="login()">Login</button>

<button type="button" class="toggle-btn" onclick="registrasi()">Registrasi</button>

</div>

<form id="login" class="kotak-input">

<input class="input" type="text" name="" placeholder="Masukan Nama" required>

<input class="input" type="text" name="" placeholder="Masukan Password" required>

<input class="cek-box" type="checkbox" name=""><span>Simpan Password</span>

<button class="tombol" type="submit">Login</button>

</form>

<form id="registrasi" class="kotak-input">

<input class="input" type="text" name="" placeholder="Masukan Nama" required>

<input class="input" type="email" name="" placeholder="Masukan Email" required>

<input class="input" type="text" name="" placeholder="Masukan Password" required>

<button class="tombol" type="submit">Registrasi</button>

</form>

</div>

</div>

<script>

var x = document.getElementById("login");

var y = document.getElementById("registrasi");

var z = document.getElementById("btn");

function registrasi(){

x.style.left = "-400px";

y.style.left = "50px";

z.style.left = "110px";

}

function login(){

x.style.left = "50px";

y.style.left = "450px";

z.style.left = "0";

}

</script>

</body>

</html>

2. Buat file dengan nama style.css

style.css

*{

margin: 0;

padding: 0;

font-family: sans-serif;

}

.halaman{

height: 100%;

width: 100%;

background: url(bg.jpg);

background-position: center;

background-size: cover;

position: absolute;

}

.kotak-form{

width: 380px;

height: 480px;

position: relative;

margin: 6% auto;

background: #fff;

padding: 5px;

}

.kotak-tombol{

width: 220px;

margin: 35px auto;

position: relative;

box-shadow: 0 0 20px 9px #ff61241f;

border-radius: 30px;

}

.toggle-btn{

padding: 10px 30px;

cursor: pointer;

background: transparent;

border: 0;

outline: none;

position: relative;

}

#btn{

top: 0;

left: 0;

position: absolute;

width: 110px;

height: 100%;

background: linear-gradient(to right, #ff105f, #ffad06);

border-radius: 30px;

transition: .5s;

}

.kotak-input{

top: 180px;

position: absolute;

width: 280px;

transition: .5s;

}

.input{

width: 100%;

padding: 10px 0;

margin: 5px 0;

border-left: 0;

border-top: 0;

border-right: 0;

border-bottom: 1px solid #999;

outline: none;

background: transparent;

}

.tombol{

width: 85%;

padding: 10px 30px;

cursor: pointer;

display: block;

margin: auto;

background: linear-gradient(to right, #ff105f, #ffad06);

border: 0;

outline: none;

border-radius: 30px;

}

.cek-box{

margin: 30px 10px 30px 0;

}

span{

color: #777;

font-size: 12px;

bottom: 68px;

position: absolute;

}

#login{

left: 50px;

}

#registrasi{

left: 450px;

}

Setelah dibuat, temen-temen bisa langsung dirunning program nya..bisa pake chrome atau aplikasi browser yang lainnya...

semoga tutorialnya bisa membantu dan bermanfaat yaa...

dan jangan lupa like dan subscribe channel take code, atau klik link nya. https://www.youtube.com/channel/UCw-8cCPV4zKHUChIR008_8A?view_as=subscriber

terimakasih....