<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!-- Begin container --> <div class='container'> <div class='container_inner'> <h1>pure CSS Form</h1> <h2> Created by <a href='http://hkmbhutto.wix.com/rasheedbhutto'>Rasheed Bhutto</a> </h2> <br> <fieldset> <div class='kickass_field'> <input maxlength='30' required='required'> <lable> Username <span>Your chosen username</span> </lable> </div> <div class='kickass_field'> <input maxlength='30' required='required' type='email'> <lable> Email address <span>Your current email address</span> </lable> </div> <div class='kickass_field'> <input maxlength='30' pattern='.{6,}' required='required' type='password'> <lable> Password <span>Minimum of 6 characters</span> </lable> </div> <button>Sign up</button> </fieldset> </br> <!-- Begin branding --> <p> </p> <div class='love'> <span>Made by <a href='https://twitter.com/rasheedbhutto' target='_blank'> Rasheed Bhutto </a></span> </div> </div> </div>

@import url(http://fonts.googleapis.com/css?family=Lato:300,400,700); body { font-family: "Lato", sans-serif; text-align: center; height: 100vh; overflow: hidden; margin: 0; /* --- Form styling --- */ } body fieldset { border: none; } body fieldset:valid > button { opacity: 1; } body fieldset:valid > button:hover { opacity: 1; background: #CD3C3C; } body button { width: 280px; opacity: .5; cursor: pointer; -webkit-transition: all .4s; transition: all .4s; border: none; font-family: "Lato", sans-serif; padding: 20px; background-color: #f65252; color: white; outline: none; margin-top: 15px; } body .kickass_field { margin: auto; position: relative; left: 0; top: 0; bottom: 0; height: 100px; right: 0; width: 280px; } body .kickass_field lable { font-size: 14px; position: absolute; height: 100px; overflow: hidden; left: 0; width: 100%; top: 50px; text-align: left; color: #F65252; font-weight: 700; font-family: "Lato", sans-serif; pointer-events: none; -webkit-transition: all .2s .3s; transition: all .2s .3s; } body .kickass_field lable span { font-size: 10px; color: #9f9fb5; clear: left; opacity: 0; font-weight: 400; display: block; -webkit-transition: opacity .5s .0s; transition: opacity .5s .0s; } body .kickass_field lable:after { width: 4px; content: ''; height: 8px; border-bottom: 2px solid #f65252; border-right: 2px solid #f65252; -webkit-transform: translateX(-10px) rotate(45deg); transform: translateX(-10px) rotate(45deg); position: absolute; left: 120%; top: 30px; -webkit-transition: all .2s; transition: all .2s; } body .kickass_field input { border: none; color: #6E738A; font-weight: 400; padding: 40px 0px 10px 0px; background: transparent; letter-spacing: 1px; outline: none; font-family: "Lato", sans-serif; height: 30px; width: 280px; -webkit-transition-property: -webkit-transform; transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; font-size: 14px; box-shadow: 0px 2px #f65252; } body .kickass_field input:focus + lable { color: #F65252; font-size: 10px; top: 10px; -webkit-transition: all .2s .0s; transition: all .2s .0s; } body .kickass_field input:focus + lable span { opacity: 1; -webkit-transition: opacity .5s .3s; transition: opacity .5s .3s; } body .kickass_field input:valid + lable { font-size: 10px; top: 10px; color: #f65252; } body .kickass_field input[type="password"]:valid + lable span { color: #99B62F; } body .kickass_field input:valid + lable span { opacity: 1; -webkit-transition: opacity .3s 0s; transition: opacity .3s 0s; } body .kickass_field input:valid + lable::after { display: block; left: 100%; } body .kickass_field input:invalid { color: #f9f9f9; } body .kickass_field input:focus:invalid { color: #6E738A; } /* --- End Form styling --- */ /* --- Begin template styling --- */ .container { background: #f9f9f9; height: 100%; border: 14px solid white; padding: 40px; box-sizing: border-box; /* --- End template styling --- */ } .container_inner { position: absolute; left: 0; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .container h1, .container h2 { font-weight: 300; } .container h1 { margin: 0; color: #6E738A; } .container p { color: #6E738A; font-weight: 300; margin-top: 40px; } .container .love span { font-size: 12px; color: #bcbcbc; font-weight: 300; } .container .love span a { color: #f65252; font-weight: 700; } .container .love span img { position: relative; margin: 3px; top: 7px; } .container h2 { margin: 7px 0 24px 0; font-size: 22px; color: #9A9FB5; } .container a { color: #f65252; text-decoration: none; } .container a:hover { text-decoration: underline; }