Animated login form. Background gif.
A Pen by Aj Dumanhug on CodePen.
<div class="login"> | |
<div class="form"> | |
<h2>NOT WORKING YET!</h2> | |
<h3>Login</h3> | |
<input type="text" placeholder="Username"> | |
<input type="password" placeholder="Password"> | |
<input type="submit" value="Sign In" class="submit"> | |
</div> | |
</div> |
Animated login form. Background gif.
A Pen by Aj Dumanhug on CodePen.
* { | |
box-sizing: border-box; | |
font-family: sans-serif; | |
} | |
.login { | |
width: 320px; | |
height: 450px; | |
border: 1px solid #CCC; | |
background: url(https://media4.giphy.com/media/BHNfhgU63qrks/giphy.gif) center center no-repeat; | |
background-size: cover; | |
margin: 30px auto; | |
border-radius: 20px; | |
} | |
.login .form { | |
width: 100%; | |
height: 100%; | |
padding: 15px 25px; | |
} | |
.login .form h2 { | |
color: #FFF; | |
text-align: center; | |
font-weight: normal; | |
font-size: 18px; | |
margin-top: 60px; | |
margin-bottom: 80px; | |
} | |
.login .form h3 { | |
color: #FFF; | |
text-align: center; | |
font-weight: normal; | |
font-size: 18px; | |
} | |
.login .form input { | |
width: 100%; | |
height: 40px; | |
margin-top: 20px; | |
background: rgba(255,255,255,.5); | |
border: 1px solid rgba(255,255,255,.1); | |
padding: 0 15px; | |
color: #FFF; | |
border-radius: 5px; | |
font-size: 14px; | |
} | |
.login .form input:focus { | |
border: 1px solid rgba(255,255,255,.8); | |
outline: none; | |
} | |
::-webkit-input-placeholder { | |
color: #DDD; | |
} | |
.login .form input.submit { | |
background: rgba(255,255,255,.9); | |
color: #444; | |
font-size: 15px; | |
margin-top: 40px; | |
font-weight: bold; | |
} |