Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
ZGgGow
<form>
<label>
<input type="text" required />
<div class="label-text">First name</div>
</label>
<label>
<input type="text" required />
<div class="label-text">Last name</div>
</label>
<button>Submit</button>
</form>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
$mineShaft: #333333
$tundora: #4A4A4A
$dustyGray: #9B9B9B
$gallery: #F0F0F0
body
background-color: $mineShaft
font-family: 'Open Sans', Helvetica
form
text-align: center
label
display: block
letter-spacing: 4px
padding-top: 30px
text-align: center
.label-text
color: $dustyGray
cursor: text
font-size: 20px
line-height: 20px
text-transform: uppercase
transform: translateY(-34px)
transition: all 0.3s
input
background-color: transparent
border: 0
border-bottom: 2px solid $tundora
color: white
font-size: 36px
letter-spacing: -1px
outline: 0
padding: 5px 20px
text-align: center
transition: all 0.3s
width: 200px
&:focus
width: 400px
& + .label-text
color: $gallery
font-size: 13px
transform: translateY(-74px)
&:valid + .label-text
font-size: 13px
transform: translateY(-74px)
button
background-color: $mineShaft
border: 2px solid white
border-radius: 27px
color: white
cursor: pointer
font-size: 20px
margin-top: 20px
padding: 15px 30px
text-transform: uppercase
transition: all 200ms
&:hover, &:focus
background-color: white
color: $mineShaft
outline: 0
<link href="http://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment