- Dec 18, 2010
- 2,637
- 2,389
It’s an old effect but one that I’ve only recently wanted to start implementing into projects, so here’s my attempt at achieving Google Material text inputs. You know the one.. where the line at the bottom of the field expands outwards
Use as you wish
You can view the pen here:
Or find the code here:
Use as you wish
You can view the pen here:
You must be registered for see links
Or find the code here:
PHP:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
body {
font: 400 14px/1.6 'Helvetica Neue', Arial, sans-serif;
}
.wrapper {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
padding: 15px 20px;
width: 350px;
background-color: #e9e9e9;
}
.input-group {
margin-bottom: 15px;
}
.input-wrapper {
position: relative;
}
input[type="text"], input[type="password"], input[type="email"], input[type="submit"] {
border: 0;
margin: 0;
font: inherit;
font-size: 13px;
outline: none;
padding: 6px 9px;
border-radius: 3px;
width: 100%;
background-color: #fff;
}
input[type="submit"] {
background-color: cornflowerblue;
border: 1px solid;
border-color: #4572c3 #4572c3 #375fa7 #4572c3;
border-bottom-width: 3px;
cursor: pointer;
color: #fff;
transition: all .2s ease-in-out;
}
input[type="submit"]:hover {
transform: scale(1.02);
}
input[type="submit"]:active {
transform: scale(0.98);
border-bottom-width: 1px;
box-shadow: 0 5px 20px rgba(0, 0, 0, .3);
}
.input-line {
height: 1px;
position: absolute;
background-color: cornflowerblue;
transition: all .4s ease;
width: 0px;
left: 50%;
transform: translateY(-50%);
}
.input-wrapper input:focus {
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.input-wrapper input:focus ~ .input-line {
width: 100%;
left: 0;
right: 0;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="input-group">
<label for="username">Username</label>
<div class="input-wrapper">
<input type="text" name="username" id="username" autocomplete="off" />
<div class="input-line"></div>
</div>
</div>
<div class="input-group">
<label for="password">Password</label>
<div class="input-wrapper">
<input type="password" name="password" id="password" autocomplete="off" />
<div class="input-line"></div>
</div>
</div>
<div class="input-group">
<label for="email">Email</label>
<div class="input-wrapper">
<input type="email" name="email" id="email" autocomplete="off" />
<div class="input-line"></div>
</div>
</div>
<input type="submit" value="Sign up">
</div>
</body>
</html>
Last edited:
