Cara Membuat Form Login. Login merupakan suatu hal yang wajib dilakukan saat kita akan masuk menggunakan akun kita kedalam sebuah platform ,misalnya sosmed, game, website dll. Biasanya form Login dibuat menggunakan kode HTML dan CSS.
Nah disini kami akan membagikan sebuah kode HTML dan CSS untuk membuat form login keren menggunakan light button yang bisa digunakan untuk website kalian.
Tentunya kode berikut hanyalah sebagai kode dasar dan kalian bisa memodifikasi dan dijadikan lebih bagus lagi sesuai yang kalian inginkan.
Cara Membuat Form Login dengan Light Button
Sebelum memulai coding membuat form login ini, alangkah baiknya kalian menyiapkan tools-tools yang dibutuhkan. Antara lain:
- Komputer/Laptop
- Text Editor bebas. (Visual Studio Code, Sublime, Notepad++ dll).
- Browser bebas (Edge, Chrome, Firefox dll).
Langkah langkah membuat form Login
- Membuat folder untuk menyimpan source code yang akan kita buat.
- Membuka text editor. Disini saya menggunakan VS Code.
- Buka lokasi folder yang akan digunakan untuk menaruh source code menggunakan text editor.
- Untuk VS Code sendiri kalian bisa pergi ke File > Open folder. Atau dengan menekan shortcut Ctrl+K Ctrl+O. dan cari folder tersebut.
- Setelah folder tersebut dibuka. Kemudian buat file baru bernama “index.html” dan masukkan source code dibawah ini.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Login With Light Button</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="login-box">
<h2>LOGIN</h2>
<form>
<div class="user-box">
<input type="text" name="" required="">
<label>Username</label>
</div>
<div class="user-box">
<input type="password" name="" required="">
<label>Password</label>
</div>
<a href="https://www.fiqihref.eu.org/2022/08/cara-membuat-form-login-keren.html">
<span></span>
<span></span>
<span></span>
<span></span>
Submit
</a>
</form>
</div>
</body>
</html>
- Kemudian buat file baru bernama “style.css”. file css ini bertujuan untuk mengatur dan mempercantik tampilan html.
- Masukkan source code dibawah ini kedalam “style.css”.
html{
height: 100%;
}
body {
margin: 0;
padding: 0;
font-family: sans-serif;
background-size: cover;
background-color: rgba(0,0,0,.4);
background: #f2eee3;
}
.login-box{
position: absolute;
top: 50%;
left: 50%;
width: 400px;
padding: 40px;
transform: translate(-50%, -50%);
background: rgba(0,0,0,.5);
box-sizing: border-box;
box-shadow: 0 15px 25px rgba(0,0,0,.6);
border-radius: 10px;
}
.login-box h2{
margin: 0 0 30px;
padding: 0;
color: #fff;
text-align: center;
}
.login-box .user-box{
position: relative;
}
.login-box .user-box input{
width: 100%;
padding: 10px 0;
font-size: 16px;
color: #fff;
margin-bottom: 30px;
border: none;
border-bottom: 1px solid #fff;
outline: none;
background-color: transparent;
}
.login-box .user-box label{
position: absolute;
top: 0;
left: 0;
padding: 10px 0;
font-size: 16px;
color: #fff;
pointer-events: none;
transition: .5s;
}
.login-box .user-box input:focus ~ label,
.login-box .user-box input:valid ~ label{
top: -20px;
left: 0;
color: #e2ff24;
font-size: 12px;
}
.login-box form a{
position: relative;
display: inline-block;
padding: 10px 20px;
color: #e2ff24;
font-size: 16px;
text-decoration: none;
text-transform: uppercase;
overflow: hidden;
transition: .5s;
margin-top: 40px;
margin-left: 95px;
margin-right: 95px;
letter-spacing: 4px;
}
.login-box a:hover{
background: #e2ff24;
color: #000;
border-radius: 5px;
box-shadow: 0 0 5px #e2ff24,
0 0 25px #e2ff24,
0 0 50px #e2ff24,
0 0 100px #e2ff24;
}
.login-box a span{
position: absolute;
display: block;
}
.login-box a span:nth-child(1){
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: linear-gradient(90deg, transparent,#e2ff24);
animation: btn-anim1 1s linear infinite;
}
@keyframes btn-anim1{
0%{
left: -100%;
}
50%, 100%{
left: 100%;
}
}
.login-box a span:nth-child(2){
top: -100%;
right: 0;
width: 2px;
height: 100%;
background: linear-gradient(180deg, transparent, #e2ff24);
animation: btn-anim2 1s linear infinite;
animation-delay: .25s;
}
@keyframes btn-anim2{
0%{
top: -100%;
}
50%, 100%{
top: 100%;
}
}
.login-box a span:nth-child(3){
bottom: 0;
right: -100;
width: 100%;
height: 2px;
background: linear-gradient(270deg, transparent, #e2ff24);
animation: btn-anim3 1s linear infinite;
animation-delay: .5s;
}
@keyframes btn-anim3{
0%{
right: -100%;
}
50%, 100%{
right: 100%;
}
}
.login-box a span:nth-child(4){
bottom: -100;
left: 0;
width: 2px;
height: 100%;
background: linear-gradient(360deg, transparent, #e2ff24);
animation: btn-anim4 1s linear infinite;
animation-delay: .75s;
}
@keyframes btn-anim4{
0%{
bottom: -100%;
}
50%, 100%{
bottom: 100%;
}
}
- Lalu save.
Buka file html tersebut dengan browser yang kalian miliki. Dengan cara:
Pergi ke file explorer dan cari file tersebut kemudian klik kanan > open with > (browser kalian).
Hasil Form Login dari Source code diatas:
Itulah cara untuk membuat form login keren menggunakan light button. Jika ada saran masukkan dan materi yang kurang jelas bisa ditanyakan dikolom komentar. See you next time in next article.
Posting Komentar untuk "Cara Membuat Form Login Keren dengan Light Button menggunakan HTML dan CSS"