KODLAR:
HTML KORLARI:
Kod:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Form</title>
</head>
<body>
<div class="main-container centered-flex">
<div class="form-container">
<div class="icon fa fa-user"></div>
<form class="centered-flex">
<div class="title">GİRİŞ</div>
<div class="msg"></div>
<div class="field">
<input type="text" placeholder="Kullanıcı adı" id="uname">
<span class="fa fa-user"></span>
</div>
<div class="field">
<input type="password" placeholder="Şifre" id="pass">
<span class="fa fa-lock"></span>
</div>
<div class="action centered-flex">
<label for="remember" class="centered-flex">
<input type="checkbox" id="remember"> Beni Hatırla
</label>
<a href="#">Şifremi Unuttum ?</a>
</div>
<div class="btn-container">
<input type="submit" id="login-btn" value="GİRİŞ">
</div>
<div class="signup">Hesabınız yok mu?<a href="#"> Üye olmak</a></div>
</form>
</div>
</div>
<script src="script.js"></script>
</body>
</html>CSS KODLARI:
Kod:
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');
* {
margin: 0;
padding: 0;
font-family: 'calibri';
box-sizing: border-box;
}
body {
background: #000000;
}
.main-container {
min-height: 100vh;
min-width: 450px;
}
.centered-flex {
display: flex;
align-items: center;
justify-content: center;
}
.form-container {
width: 400px;
height: 480px;
display: grid;
position: relative;
}
.icon {
position: absolute;
width: 85px;
font-size: 50px;
display: grid;
height: 85px;
place-content: center;
border: 1px solid #2a2a2a;
z-index: 1;
justify-self: center;
border-radius: 50%;
background: #ffffff;
}
.fa {
color: #a2a2a2;
}
form {
flex-direction: column;
padding: 25px 25px 10px;
height: 440px;
border-radius: 30px;
background: rgba(19, 19, 19, 0.736);
border: 1px solid rgba(255, 255, 255, 0.097);
position: absolute;
width: 100%;
bottom: 0;
}
.title {
position: relative;
margin: 40px 0;
font-size: 20px;
font-weight: bold;
color: rgb(255, 255, 255);
}
.msg {
color: #ff0000;
position: absolute;
top: 25%;
}
.field {
display: flex;
position: relative;
width: 100%;
}
.field .fa {
position: absolute;
font-size: 14px;
right: 10px;
bottom: 10px;
}
input:-webkit-autofill {
-webkit-box-shadow: 0 0 0 30px rgb(180, 99, 99) inset;
}
input:-webkit-autofill {
-webkit-text-fill-color: #f30404 !important;
}
form input {
display: block;
outline: none;
width: 100%;
border: none;
font-size: 16px;
color: #00ff2a;
margin: 25px 0 5px;
caret-color: #cccccc;
background: transparent;
padding: 10px 25px 3px 0;
border-bottom: 1px solid #404040;
}
.action {
justify-content: space-between;
width: 100%;
font-size: 14px;
}
.action label {
cursor: pointer;
color: #9e9393;
}
.action input {
width: auto;
margin: 0 8px 0 0;
cursor: pointer;
}
a {
text-decoration: none;
color: #949292;
}
.btn-container {
padding: 20px;
transition: .2s linear;
}
#login-btn {
padding: 5px 20px;
border: none;
background: rgb(31, 119, 28);
color: rgb(255, 255, 255);
font-weight: 600;
font-size: 16px;
border-radius: 15px;
transition: .3s;
margin: 25px 0;
}
#login-btn:hover {
cursor: pointer;
}
.signup {
color: rgb(104, 98, 98);
margin-top: 10px;
}
.shift-left {
transform: translateX(-120%);
}
.shift-right {
transform: translateX(120%);
}
.shift-top {
transform: translateY(-150%);
}
.shift-bottom {
transform: translateY(150%);
}
.no-shift {
transform: translate(0%, 0%);
}JS KODLARI:
Kod:
const uname = document.querySelector('#uname');
const pass = document.querySelector('#pass');
const btnContainer = document.querySelector('.btn-container');
const btn = document.querySelector('#login-btn');
const form = document.querySelector('form');
const msg = document.querySelector('.msg');
btn.disabled = true;
function shiftButton() {
showMsg();
const positions = ['shift-left', 'shift-top', 'shift-right', 'shift-bottom'];
const currentPosition = positions.find(dir => btn.classList.contains(dir));
const nextPosition = positions[(positions.indexOf(currentPosition) + 1) % positions.length];
btn.classList.remove(currentPosition);
btn.classList.add(nextPosition);
}
function showMsg() {
const isEmpty = uname.value === '' || pass.value === '';
btn.classList.toggle('no-shift', !isEmpty);
if (isEmpty) {
btn.disabled = true
msg.style.color = 'rgb(218 49 49)';
msg.innerText = 'Lütfen devam etmeden önce giriş alanlarını doldurun';
} else {
msg.innerText = 'Harika! Şimdi devam edebilirsiniz';
msg.style.color = '#92ff92';
btn.disabled = false;
btn.classList.add('no-shift')
}
}
btnContainer.addEventListener('mouseover', shiftButton);
btn.addEventListener('mouseover', shiftButton);
form.addEventListener('input', showMsg)
btn.addEventListener('touchstart', shiftButton);Bu örnek, Smart UI Studio tarafından yayınlanan bir yazılıma dayanmaktadır.
Lisans: Limited Commercial Use License © 2024 Smart UI Studio
Bu paylaşım yalnızca eğitim ve ticari olmayan kullanım içindir.
Kodun kaynak haliyle ticari projelerde kullanılması, satılması veya dağıtılması yasaktır.
femo sunar...
