<!-- this is the markup, keep your hands off! -->
<form>
<label for="email">Subscribe to our mailing list</label>
<input type="email" value="" name="email" placeholder="email address" required>
<input type="submit" value="Subscribe" name="subscribe">
</form>
@import url(https://fonts.googleapis.com/css?family=Lato:300,400,700)
html, body
background: #fbfbfb
height: 100%
width: 100%
-webkit-font-smoothing: antialiased
form
animation-name: scaleanimation
animation-duration: .3s
background: white
box-shadow: 0 1px 3px 0 rgba(0,0,0,0.1)
left: 50%
position: absolute
top: 50%
transform: translate(-50%,-50%)
width: 400px
label
border-top: 2px solid #3498db
border-bottom: 1px solid rgba(0,0,0,0.1)
color: #2c3e50
display: block
font-family: 'Lato', 'Helvetica' ,sans-serif
font-weight: 400
font-size: 18px
height: 60px
float: none
line-height: 60px
letter-spacing: .05em
text-align: center
text-transform: uppercase
width: 100%
input[type="email"]
background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 98%, #3498db 2%)
background-size: 0% 100%
background-repeat: no-repeat
border: none
//border: 1px solid red
border-bottom: 1px solid rgba(0,0,0,0.1)
border-radius: 0
color: #2c3e50
font-family: 'Lato', 'Helvetica' ,sans-serif
font-size: 20px
font-weight: 400
height: 45px
margin: 50px 5%
outline: none
padding: 0
transition: all .2s ease
width: 90%
&::placeholder
color: rgba(0,0,0,.5)
font-family: 'Lato', 'Helvetica' ,sans-serif
font-size: 14px
font-weight: 400
letter-spacing: .8px
transition: all .2s ease
backface-visibility: hidden
perspective: 1000
text-transform: uppercase
visibility: visible!important
&.hasValue, &:focus
background-size: 100% 100%
&::placeholder
color: rgba(0,0,0,.7)
transform: translate3d(0%, -135%, 0)
input[type="submit"]
background: #fbfbfb
border: none
cursor: pointer
color: #333
float: left
font-family: 'Lato', 'Helvetica' ,sans-serif
font-size: 16px
height: 70px
letter-spacing: .8px
line-height: 70px
margin: 0
padding: 0
position: relative
text-align: center
transition: all .3s ease-out
text-transform: uppercase
overflow: hidden
width: 100%
&:hover
background: #34495e
color: white
@keyframes scaleanimation
0%
opacity: 0
transform: translate(-50%,-50%) scale(1.5,1.5)
100%
opacity: 1
transform: translate(-50%,-50%) scale(1,1)
View Compiled
$("input[type='email']").blur(function(){
if($(this).val() !== ''){
$(this).addClass('hasValue');
}else{
$(this).removeClass('hasValue');
}
});
This Pen doesn't use any external CSS resources.