Bir login ekranı kodluyorum. İki tane inputboxım var ve bu inputboxların odaklanma animasyonu renk değişimi şeklinde ancak seçildiğinde bu animasyonla beraber kaynağını bilmediğim bir efekt de çalışıyor. Bu nedenle geçerli animasyonumu göremiyorum.
Görseldeki gibi oluyor.
HTML:
<!DOCTYPE html>
<html lang="tr">
<head>
<title>Login</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed:ital@1&display=swap');
body{
background-color: #000000;
font-family: Arial, sans-serif;
}
form{
background-color: rgb(0, 0, 0);
border-radius: 30px;
padding: 20px;
width: 300px;
margin: auto;
margin-top: 50vh;
transform: translateY(-50%);
border: 2px solid white;
}
.input-container{
display:flex;
flex-direction:column;
align-items:center;
border: none;
}
.input-container input{
width:90%;
padding:10px;
background-color: black;
color: white;
margin-top:10px;
margin-bottom:20px;
font-family: 'Roboto Condensed';
border-bottom: 1px solid white;
transition-duration: 0.5s;
}
.input-container input:focus{
border-bottom: 1px solid #4CAF50;
}
input[type="submit"]{
background-color: #4CAF50;
font-family: 'Roboto Condensed';
color: white;
border-radius: 30px;
padding: 10px;
border: 3px solid #4CAF50;
border-spacing: 40px;
cursor: pointer;
display:block;
margin:auto;
width:50%;
transition-duration: 0.5s;
}
input[type="submit"]:hover{
background-color: #39863c;
border-radius: 15px;
}
#sign_up{
color:#ffffff;
text-decoration:none;
display:block;
margin:auto;
width:50%;
text-align:center;
margin-top:20px;
font-size:.9em;
font-family: 'Roboto Condensed';
}
a{
color:#4CAF50;
}
h2{
color:white;
text-align:center;
font-family: 'Roboto Condensed';
}
</style>
<meta charset="UTF-8">
</head>
<body>
<form method="POST" id="form">
<h2>Giriş Yap</h2>
<div class="input-container">
<input type="text" name="email" id="email" autocomplete="on" required>
<input type="password" name="password" required>
</div>
<input type="submit" id="submit" value="Contiune">
<p id="sign_up">Hesabın yok mu? <a href="#">Kaydol</a></p>
</form>
</body>
</html>Görseldeki gibi oluyor.