Item: Cara Membuat Form Login dengan Hover Animation Effect di Xampp
Rating: 4.7
Author: Mas Raffi

Konten [Tampil]

Berbagai macam efek yang dapat ditambahkan ketika membuat sebuah website menjaikan seorang programmer mempunyai kebebasan dalam membuat efek yang sesuai dengan keinginannya. Salah satu efek yang dipakai adalah Hover Animation / Hover Effect. Hover animation adalah sebuah efek yang akan memperbesar form username dan password ketika diinput oleh pengguna ya. Oleh karena itu, Cara membuat form login dengan Hover Effect Animation.

Daftar isi

Cara membuat form login dengan hover animation dapat digunakan untuk mempercantik tampilan website terutama pada bagian formulit login dengan menggunakan bahasa pemrograman HTML dan Css3.

Baca Juga ✓ Cara Install CMS WordPress di Localhost dengan Xampp

Cara Membuat Form Login dengan Hover Animation Effect

Pertama anda harus membuka XAMPP Control Panel dan nyalakan Apache dan MySql.
Kemudian, anda buka aplikasi text editor anda ya, anda dapat menggunakan Notepad++, Dreamweaver bahkan Visual Code, lalu anda ketikan script login form dengan hover animation effect.

<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Cara Membuat Animasi Login Form dengan Hover Effect</title>
<link rel="stylesheet" href="style-hover-animation-loginform.css">
</head>
<body>

<form class="box" action="animation-login-1.php" method="post">
<h1>Login Form</h1>
<input type="text" name="" placeholder="Username Rafinternet">
<input type="password" name="" placeholder="Password Rafinternet">
<input type="submit" name="" value="Login">
</form>

</body>
</html>

Simpanlah script di atas pada folder Xampp > Htdocs > Folder Baru (Sesuaikan dengan keinginan anda) > Simpan dengan nama "hover-animation-loginform.php"

Silahkan anda buka web browser anda ya, kemudian anda dapat mengetik http://localhost/namafolderanda/hover-animation-loginform.php maka tampilannya akan sebagai berikut

Tentunya dengan hanya menggunakan script di atas, maka tampilannya akan berantahkan, anda dapat mempercantik dengan menambahkan hover animation effect dengan memberikan kode css sebagai berikut.

body{

margin: 0;

padding:0;

font-family: sant-serif;

background: #2980b9;

}

.box{

width:300px;

padding:40px;

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%,-50%);

background: #2c3e50;

text-align: center;

}

.box h1{

color: white;

text-transform: uppercase;

font-weight: 500;

}

.box input[type= "text"],.box input[type="password"]{

border: 0;

background: none;

display: block;

margin: 20px auto;

text-align: center;

border: 2px solid #3498db;

padding: 14px 10px;

width: 200 px;

outline: none;

color: white;

border-radius: 24px;

transition: 0.25s;

}

.box input[type= "text"]:focus,.box input[type="password"]:focus{

width:280px;

border-color:#2ecc71;

}

.box input[type= "submit"]{

border: 0;

background: none;

display: block;

margin: 20px auto;

text-align: center;

border: 2px solid #2ecc71;

padding: 14px 40px;

outline: none;

color: white;

border-radius: 24px;

transition: 0.25s;

cursor:pointer;

}

.box input[type= "submit"]:hover{

background: #2ecc71;

}

Lalu anda dapat menyimpan pada Xampp > Htdocs > Folder Baru > beri nama file dengan nama "style-hover-animation-loginform.css"
Refresh halaman http://localhost/inwepo/hover-animatio-loginform.php
Selesai

Berikut Tampilan Cara Membuat form login dengan hover animation effect ya.

a. Tampilan Login Form dengan Hover Animation

b. Ketika Box Username di Ketik

c. Ketika Kotak Password di isikan.

d. Ketika tombol Login di Isi

Beberapa Kendala yang sering dialami oleh pemrogramer pemula

File tidak diletakkan pada folder Htdocs. Kenapa file php, html, dan css harus diletakkan kedalam folder htdocs? karena folder tersebut merupakan salah satu folder bawaan dari aplikasi Xampp yang berfungsi untuk menyimpan file yang akan dijalankan di web browser.
Anda salah dalam menuliskan alamat url di web browser.

Nah Cara membuat form login dengan Hover Animation Effect di Xampp telah selesai ya, semoga dapat bermanfaat ya.