Skip to content

Instantly share code, notes, and snippets.

@mvictorl

mvictorl/index.html

Created May 10, 2020 15:03
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mvictorl/568ac0b6ed29d6f0c20e98027de06270 to your computer and use it in GitHub Desktop.
Save mvictorl/568ac0b6ed29d6f0c20e98027de06270 to your computer and use it in GitHub Desktop.
Download ZIP
Animated Input Example
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Animated Input Example</h1>
<div class="form">
<input type="text" name="name" autocomplete="off" required />
<label for="name" class="label-name"Name>
<span class="label-content">Name</span>
</label>
</div>
</body>
</html>
Raw
style.css
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 60vh;
display: flex;
justify-content: space-around;
align-items: center;
flex-direction: column;
font-family: sans-serif;
}
.form {
position: relative;
width: 50%;
height: 50px;
overflow: hidden;
}
.form input {
width: 100%;
height: 100%;
padding-top: 20px;
color: #595f6e;
border: none;
outline: none;
}
.form label {
position: absolute;
width: 100%;
height: 100%;
bottom: 0;
left: 0;
pointer-events: none;
border-bottom: 1px solid grey;
}
.form label::after {
content: "";
position: absolute;
width: 100%;
height: 100%;
left: 0;
bottom: -1px;
border-bottom: 3px solid #5fa8d3;
transform: translateX(-100%);
transition: transform .4s ease;
}
.label-content {
position: absolute;
left: 0;
bottom: 5px;
color: grey;
font-style: italic;
transition: all .4s ease;
}
.form input:focus + .label-name .label-content,
.form input:valid + .label-name .label-content {
transform: translateY(-150%);
font-size: 12px;
color: #5fa8d3;
}
.form input:focus + .label-name .label-content::after,
.form input:valid + .label-name .label-content::after {
content: ":";
}
.form input:focus + .label-name::after,
.form input:valid + .label-name::after {
transform: translateX(0);
/*transition: transform .3s ease;*/
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment