Modern Giriş Formu

<style>
.form-group {
  position: relative;
  margin-bottom: 25px;
}

.form-control {
  width: 100%;
  padding: 10px 0;
  font-size: 16px;
  border: none;
  border-bottom: 1px solid #ccc;
  outline: none;
  background: transparent;
}

.form-label {
  position: absolute;
  top: 10px;
  left: 0;
  color: #999;
  transition: 0.3s;
  pointer-events: none;
}

.form-control:focus ~ .form-label,
.form-control:valid ~ .form-label {
  top: -20px;
  font-size: 12px;
  color: #5264AE;
}

.form-line {
  position: relative;
  display: block;
  width: 100%;
}

.form-line:before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: #5264AE;
  transition: 0.3s;
}

.form-control:focus ~ .form-line:before {
  width: 100%;
}

.login-btn {
  background: #5264AE;
  color: white;
  border: none;
  padding: 10px 20px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  margin-top: 10px;
}
</style>

<form>
  <div class="form-group">
    <input type="text" class="form-control" required>
    <span class="form-line"></span>
    <label class="form-label">Kullanıcı Adı</label>
  </div>
  <div class="form-group">
    <input type="password" class="form-control" required>
    <span class="form-line"></span>
    <label class="form-label">Şifre</label>
  </div>
  <button type="submit" class="login-btn">Giriş Yap</button>
</form>