Cara Membuat Efek Animasi Form Login Menggunakan HTML dan CSS

Hallo sahabat Dumet School, jumpa lagi bersama saya Edi dalam artikel kali ini akan membahas tentang cara membuat efek animasi form login menggunakan html dan css. Efek animasi yang saya buat terletak pada label form login.Langkah pertama cara membuat efek animasi form login menggunakan html dan css, sahabat dumet persiapkan struktur html ketikan seperti berikut ini:

<!DOCTYPE html>
<html>
<head>
	<title>Efek Form Input Login</title>
</head>
<body>
	<div class="container">
		<img src="logo.png">
		<form>
			<input type="text" name="username" required autocomplete="off" autofocus>
			<label for="username">Username</label>
			<br>
			<a href="#">Lupa username?</a>
			<br>
			<p>Bukan komputer Anda? Gunakan login secara pribadi.</p>
			<br>
			<p class="btn">Berikutnya</p>
		</form>
	</div>
</body>
</html>

Selanjutnya kita ketikan kode untuk style css disisipkan pada tag head ya sahabat semua, dan berikut kode cssnya:

<style type="text/css">
		body{
			background:#62d3fc url(bg.jpg);
			background-size: cover;
		}

		.container{
			display:block;
			position: relative;
			width: 350px;
			height: 300px;
			background: #99ffd6;
			margin: 50px auto;
			padding: 30px;
		}
		
		label{
			display: inline-block;
			position: relative;
			top:-30px;
			left: 2px;
			color:#969696;
			font-family: 'Aharoni', sans-serif;
			font-size: 15px;
			z-index: 1;
			transition: all 0.3s ease;
			padding:0 10px;
			z-index: 3;
			background: #99ffd6;
			border-radius: 5px;
			pointer-events: none;
		}
		
		input{
			display: block;
			position: relative;
			background:none;
			border: 1px solid grey;
			width: 95%;
			font-family: 'Aharoni', sans-serif;
			font-weight: bold;
			font-size: 17px;
			z-index: 2;
			padding: 10px;
			border-radius: 5px;
		}

		input:focus, input:valid{
			outline: none;
			border: 2px solid #0066ff;
		}

		input:focus + label, input:valid + label{
			top: -53px;
			font-size: 12px;
		}	

		img{
			margin-left: 40px;
		}
		.btn{
			padding:10px;
			background: #0000ff;
			display: inline-block;
			float: right;
			border-radius: 5px;
			cursor: pointer;
			color:#1affff;
			font-weight: bold
		}
		.btn:hover{
			background:#3399ff;
			color:#0000ff;
		}
	</style>

Selanjutnya silahkan sahabat semua jalan pada browser masing-masing maka akan terlihat sebagai berikut:

Gambar di atas adalah gambar pertama sebelum input form.

Gambar diatas dimana saat kita akan input username pada form maka label berpindah keatas,

Demikian artikel tentang cara membuat efek animasi form login menggunakan html dan css, semoga bermanfaat dan jumpa lagi pada artikel lainnya.

terima kasih.