Cara Membuat Halaman Pop-up Login Sederhana Menggunakan HTML & CSS
*Membuat halaman pop-up login sederhana menggunakan HTML & CSS
Halaman login merupakan fitur utama dalam sebuah website dinamis Terkadang web developer mencari cara agar halaman login ini tidak memenuhi halaman utama atau pun berpindah halaman saat user ingin login dalam sebuah website, sehingga halaman utama pada website hanya berisikan koten yang di tawarkan dalam sebuah website, para web developer pun mempermudah akses login user dengan membuat halaman pop-up/modal.
Pop-up merupakan suatu komponen pada sebuah website yang umum nya menampilkan sebuah notifikasi dan memenuhi layar pada sebuah halaman website,namun bisa juga menampilkan suatu konten atau fitur pada halaman website sehingga halaman website tetap, pop-up/modal akan muncul ketika user menekan tombol untuk memunculkan halaman yang akan di tampilkan.
Untuk membuat sebuah pop-up/modal umum nya menggunakan javascript namun bisa juga menggunakan HTML & CSS saja,bagaimana cara membuatnya simak artikel berikut:
•Langkah Pertama
1.Buka text-editor kalian masing masing selanjutnya buat folder untuk menyimpan file project ini, setelah itu buat file di dalam folder yang kalian buat dengan nama berikut modal.html
2.setelah selesai membuat project file silahkan copy code HTML di bawah :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="modal.css">
</head>
<body>
<div>
<a href="#wrab"><button class="btn"> Open modal</button></a>
</div>
<div href="" class="wrab" id="wrab">
<div class="bg-color">
<div class="modal" id="modal">
<p><a href="">X</a></p>
<h1 class="label">Login</h1>
<form action="" method="get" accept-charset="utf-8">
<label for="">Email:</label>
<input type="text" placeholder="Masukan Email" id="name">
<label for="">Password:</label>
<input type="password" placeholder="Masukan Password" id="sandi">
<button type="submit" class="btn2">Login</button>
</form>
</div>
</div>
</div>
</body>
</html>
•Langkah Kedua
3.setelah selesai buat file css di dalam folder yang kalian buat dengan nama modal.css
jika sudah silahkan copy code css berikut:
button{
border: none;
}
a{
text-decoration: none;
}
input{
display: block;
width: 80%;
padding: 15px;
margin-top: 10px;
margin-bottom: 40px;
border: none;
border-bottom: 2px solid green;
font-family: sans-serif;
font-size: 16px;
}
label{
font-family: sans-serif;
}
.modal{
border-radius: 10px;
padding: 50px;
margin-left: 30%;
margin-right: 30%;
box-shadow: 1px 1px 5px;
background-color: white;
visibility: hidden;
}
.modal h1,form{
margin-left: 20%;
}
.modal h1{
margin-left: 40%;
font-family: sans-serif;
}
.modal p{
position: relative;
left: 107%;
bottom: 65px;
font-size: 20px;
background-color: white;
display: inline;
padding: 10px;
border-radius: 50%;
}
.btn{
color: white;
width: 10%;
height: 80px;
font-size: 18px;
background-color: #007bff;
border-radius: 10px;
}
.btn2{
color: white;
width: 40%;
height: 40px;
margin-left: 20%;
background-color: #007bff;
border: none;
border-radius: 10px;
font-size: 20px
}
.btn2:hover{
background-color: #0F549B;
}
#wrab:target .modal{
transition: 0.56s;
transform: translateY(100px);
position: relative;
visibility: visible;
}
#wrab:target .bg-color{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
background-color: rgb(0, 0, 0,.5);
}
•Langkah Terakhir
4.jika sudah selesai hubungkan file CSS kedalam file HTML nya dengan code berikut:
*<link rel="stylesheet" href="modal.css">
Maka hasil nya akan seperti ini:
Baca Juga : Mengenal Tugas dan Keterampilan Database Administrator serta Prospek Karier dan Gaji
•Penjelasan:
*visibility:hidden di maksud kan agar saat user belum menenkan tombol login halaman belum muncul
Ketika user menekan tombol login maka modal akan di target menggukanan pseudo element CSS dan membuat background layar menjadi hitam sedikit transparan dan menampilkan halaman login
transform: translateY(100px); berfungsi agar pada saat halaman login mempunyai effek mucul dari atas ke bawah dengan di beri trasition 0.56 detik.
Bagaimana mudah bukan membuat halaman pop-up login sederhana menggunakan HTML & CSS selamat mencoba .
https://github.com/ryanm1928/pop-up-login-sederhana download demo project