HTML
<h2>Contact Us</h2>
<form action="">
<input type="text" id="n" autofocus>
<label for="n" class="name"><span class="label-text">Name</span></label>
<input type="email" id="e">
<label for="e" class="email"><span class="label-text">Email</span></label>
<textarea id="m"></textarea>
<label for="m" class="message"><span class="label-text">Message</span></label>
<input type="submit" value="Send message" class="button">
</form>
SCSS
$background: #181b31;
$darkgreen: #07c83e; // this is light green
$green: #09805c; // this is dark green
$lilac: #575b8e;
$red: #e9165d;
// General page styling
body {
background: $background;
color: #fff;
font: 300 1.25em "Open Sans", sans-serif;
margin: 0 1em;
max-width: calc(100% - 7em);
padding: 2em calc(50% - 16em);
}
h2 {
margin: 0 0 0.25em;
font-size: 2em;
font-weight: 300;
}
form { // Important for placement
position: relative;
}
textarea {
resize: none;
}
// General form styling
input,
textarea {
background: transparent;
border: 0;
box-sizing: border-box;
color: inherit;
margin: 0.5em 0;
padding: 0.5em;
width: 100%;
&:focus {
outline: 0;
}
}
label {
position: absolute;
left: 0;
width: 100%;
// The colored borders around the text inputs
&::before,
&::after {
border-width: 1px;
border-style: solid;
content:' ';
pointer-events: none;
position: absolute;
transition: 0.75s;
width: 5%;
height: 2.25em;
z-index: 1;
}
&::before {
border-right: 0;
}
&::after {
border-left: 0;
right: 0;
}
}
// Underlined text
.label-text {
background: $background;
display: block;
padding: 0.5em 1em;
position: absolute;
right: 0;
transition: 0.5s;
// Underline
&::after {
border-top: 1px solid;
content: ' ';
display: block;
transition: 0.5s;
}
}
input:focus,
textarea:focus {
// Expand borders
& + label::before,
& + label::after {
width: 50%;
}
// Move text
& + label .label-text {
transform: translate3d(100%,0,0);
}
// Move text underline
& + label .label-text::after {
transform: translate3d(-100%,-0.75em,0);
width: 1em;
}
}
// Color inputs
#n {
color: $green;
}
#e {
color: $darkgreen;
}
#n:focus + label::before,
#n:focus + label::after {
border-color: $green;
}
#e:focus + label::before,
#e:focus + label::after {
border-color: $darkgreen;
}
// Color input labels
.name {
color: $green;
top: 0.5em;
&::before,
&::after {
border-color: rgba($green,0.3);
top: 0;
}
}
.email {
color: $darkgreen;
top: 3.85em;
&::before,
&::after {
border-color: rgba($darkgreen,0.3);
top: 0;
}
}
#m {
height: 8em;
}
.message {
color: $lilac;
top: 7.25em;
&::before,
&::after {
height: 8em;
}
}
.button {
color: $red;
border: 1px solid;
position: relative;
transition: 0.3s;
&:hover {
background: rgba($red, 0.2);
}
}
@media (min-width: 660px) and (max-width: 856px) {
body {
max-width: calc(100% - 12em);
}
}
