Css Animasyonlu Giriş Paneli
<!DOCTYPE html>
<html>
<head>
<title>Animasyonlu Form Örneği</title>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="stiller.css" />
</head>
<body>
<div class="container">
<section>
<form>
<label>
<input name="name" id="name" type="text" required />
<div class="label-text">Full Name</div>
</label>
<label>
<input type="email" name="email" id="email" required />
<div class="label-text">Email</div>
</label>
<label>
<input type="tel" name="phone" id="phone" required />
<div class="label-text">Phone Number</div>
</label>
<button type="submit" value="Submit">Submit</button>
</form>
</section>
</div>
</body>
</html>
html, body{
background-color: #1d2227;
/*height: 100vh;*/
height:100%;
font-family: 'Montserrat', sans-serif;
}
div.container{
height: 100%;
display: flex;
/*align-items: center;*/
justify-content: center;
}
/* form design */
form {
text-align: center;
border: 1px solid #4A4A4A;
padding: 30px;
}
label {
display: block;
letter-spacing: 4px;
padding-top: 30px;
text-align: center;
}
/* animation for the text to float up */
label .label-text {
color: #9B9B9B;
cursor: text;
font-size: 15px;
line-height: 20px;
text-transform: uppercase;
transform: translateY(-34px);
transition: all 1s;
}
/* remove the input box styling */
label input {
background-color: transparent;
border: 0;
border-bottom: 2px solid #4A4A4A;
color: white;
font-size: 20px;
letter-spacing: 1px;
outline: 0;
padding: 5px 20px;
text-align: center;
transition: all 1s;
width: 200px;
}
/* once you click in the input the input width box animates */
label input:focus {
max-width: 100%;
width: 400px;
}
/* the text floats up and turns white */
label input:focus + .label-text {
color: #F0F0F0;
font-size: 13px;
margin-top: 10px;
transform: translateY(-74px);
}
/* the text floats up during form validation */
label input:valid + .label-text {
font-size: 13px;
transform: translateY(-74px);
}
/* button styling */
button {
background: transparent;
color: #F0F0F0;
border: 2px solid #F0F0F0;
font-size: 15px;
letter-spacing: 2px;
padding: 20px 75px;
text-transform: uppercase;
cursor: pointer;
display: inline-block;
margin: 15px 30px;
transition: all 3s;
}
button:hover, button:focus {
background-color: white;
color: #333333;
}
Kaynak