<div class="owl">
<div class="hand"></div>
<div class="hand hand-r"></div>
<div class="arms">
<div class="arm"></div>
<div class="arm arm-r"></div>
</div>
</div>
<div class="form">
<div class="control">
<label for="email" class="fa fa-envelope"></label>
<input id="email" placeholder="Email" type="email"></input>
</div>
<div class="control">
<label for="password" class="fa fa-asterisk"></label>
<input id="password" placeholder="Password" type="password"></input>
</div>
</div>@import url('https://fonts.googleapis.com/css?family=Roboto')
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css')
body
background-color #1a8fb4
font-family 'Roboto', sans-serif
font-size 14px
.owl
margin auto
width 211px
height 108px
background-image url('https://dash.readme.io/img/owl-login.png')
position relative
.hand
width 34px
height 34px
border-radius 40px
background-color #472d20
transform scaleY(0.6)
position absolute
left 14px
bottom -8px
transition 0.3s ease-out
&.password
transform translateX(42px) translateY(-15px) scale(0.7);
&.hand-r
left 170px
&.password
transform translateX(-42px) translateY(-15px) scale(0.7);
.arms
position absolute
top 58px
height 41px
width 100%
overflow hidden
.arm
width 40px
height 65px
background-image url('https://dash.readme.io/img/owl-login-arm.png')
position absolute
left 20px
top 40px
transition 0.3s ease-out
&.password
transform translateX(40px) translateY(-40px)
&.arm-r
left 158px
transform scaleX(-1)
&.password
transform translateX(-40px) translateY(-40px) scaleX(-1)
.form
margin auto
margin-top -9px
padding 30px
background-color white
width 175px
.control
margin-bottom 10px
position relative
label
position absolute
font-size 16px
top 11px
left 9px
color rgba(0,0,0,0.3)
input
padding 9px 6px 9px 30px
border-radius 4px
border 1px solid #cccccc
font-size 14px$('input[type="password"]').on('focus', () => {
$('*').addClass('password');
}).on('focusout', () => {
$('*').removeClass('password');
});;
External CSS
This Pen doesn't use any external CSS resources.