Minimalistic login page

Login widget with floating input labels, keep signed in checkbox and forgot password link

Below you can find an example of minimalistic login form. This snippet uses following techniques:

All fields below are editable. You can experiment with the code and see the result instantly:
<div class="login-widget">
<hr class="rainbow-line">
<div class="header-container">
<h1 class="widget-header">Sign in</h1>
</div>
<form autocomplete="off">
<div class="form-group">
<input class="input" type="text" id="login-username">
<label class="floating-label" for="user-first-name">Username</label>
</div>
<div class="form-group">
<input class="input" type="password" id="login-password" autocomplete="new-password">
<label class="floating-label" for="user-last-name">Password</label>
</div>
<div class="form-group login-controls">
<input id="checkbox-1" class="checkbox" name="checkbox-1" type="checkbox">
<label for="checkbox-1" class="label">Keep me signed in</label>
<a class="forgot-password" href="#">Forgot password?</a>
</div>
<div class="form-group">
<input type="submit" onclick="return false;" class="button wide login-submit" value="Sign In" >
</div>
</form>
</div>
HTML
@import url('https://fonts.googleapis.com/css?family=Open+Sans:400,700|Quicksand:400,700');

@font-face {
font-family: "sample-font";
src:url("fonts/sample-font.eot");
src:url("fonts/sample-font.eot?#iefix") format("embedded-opentype"),
url("fonts/sample-font.woff") format("woff"),
url("fonts/sample-font.ttf") format("truetype"),
url("fonts/sample-font.svg#sample-font") format("svg");
font-weight: normal;
font-style: normal;
}

* {
box-sizing:border-box;
margin: 0;
padding: 0;
}

body {
background: #e2e2e2;
text-align: center;
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

a {
color: #2980b9;
}

/* Login Widget */

.login-widget {
background: #fff;
border-radius: 2px;
display: inline-block;
margin-top: 50px;
max-width: 300px;
width:100%;
padding: 20px;
text-align: left;
box-shadow: 0 1px 3px rgba(0,0,0,0.15), 0 1px 2px rgba(0,0,0,0.25);
}

.rainbow-line {
height: 5px;
border-radius: 2px 2px 0 0;
border-top: 0;
border: none;
background: #c4e17f;
margin: -20px -20px 20px;
background: #8f1fd7; /* Just purple for older browsers */
background-image: -webkit-linear-gradient(left, #b2d462, #b2d462 12.5%, #d9e0a0 12.5%, #d9e0a0 25%, #ff8519 25%, #ff8519 37.5%, #e55042 37.5%, #e55042 50%, #d378b6 50%, #d378b6 62.5%, #8f1fd7 62.5%, #8f1fd7 75%, #2c79e3 75%, #2c79e3 87.5%, #17b1e7 87.5%, #17b1e7);
background-image: -moz-linear-gradient(left, #b2d462, #b2d462 12.5%, #d9e0a0 12.5%, #d9e0a0 25%, #ff8519 25%, #ff8519 37.5%, #e55042 37.5%, #e55042 50%, #d378b6 50%, #d378b6 62.5%, #8f1fd7 62.5%, #8f1fd7 75%, #2c79e3 75%, #2c79e3 87.5%, #17b1e7 87.5%, #17b1e7);
background-image: -o-linear-gradient(left, #b2d462, #b2d462 12.5%, #d9e0a0 12.5%, #d9e0a0 25%, #ff8519 25%, #ff8519 37.5%, #e55042 37.5%, #e55042 50%, #d378b6 50%, #d378b6 62.5%, #8f1fd7 62.5%, #8f1fd7 75%, #2c79e3 75%, #2c79e3 87.5%, #17b1e7 87.5%, #17b1e7);
background-image: linear-gradient(to right, #b2d462, #b2d462 12.5%, #d9e0a0 12.5%, #d9e0a0 25%, #ff8519 25%, #ff8519 37.5%, #e55042 37.5%, #e55042 50%, #d378b6 50%, #d378b6 62.5%, #8f1fd7 62.5%, #8f1fd7 75%, #2c79e3 75%, #2c79e3 87.5%, #17b1e7 87.5%, #17b1e7);
}

.widget-header {
font-size: 20px;
text-transform: uppercase;
font-family: 'Quicksand', sans-serif;
color: #111;
}

.form-group {
position: relative;
margin: 10px 0 15px;
}

.form-group:last-child {
margin-bottom: 0;
}

/* Inputs With Floating Labels */

.form-group .floating-label {
color: #333;
font-size: 15px;
position: absolute;
pointer-events: none;
top: 10px;
transition: 0.2s ease all;
width: 100%;
font-family: 'Quicksand', sans-serif;
}

.input {
background-color: transparent;
color: #666;
font-size: 15px;
padding: 10px 10px 10px 0;
position: relative;
display: block;
border: none;
width: 100%;
border-bottom: 1px solid #ddd;
}

.input:focus {
outline: none;
}

.input:focus + .floating-label,
.input.has-text + .floating-label {
top: -10px;
font-size: 13px;
color: #777;
}

/* Button Styles */

.button {
display: inline-block;
padding: 9px 20px;
border: none;
background: #5a5a5a;
color: #fff;
font-size: 13px;
font-weight: bold;
line-height: 1.2em;
text-decoration: none;
border-radius: 16px;
cursor: pointer;
box-sizing: border-box;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
user-select: none;
-webkit-appearance: none;
text-shadow: 0px 1px 3px rgba(0,0,0,0.4);
}

.button:focus {
outline:none;
}

.button:hover {
background: #666666;
}

.button:active {
box-shadow: inset 0 0 15px rgba(0,0,0,0.5);
}

.button.wide {
width:100%;
}

.login-submit {
text-transform: uppercase;
font-family: 'Quicksand', sans-serif;
font-size: 15px;
}

.login-controls {
font-size:13px;
color: #666;
margin: 20px 0 22px;
}

.forgot-password {
float: right;
margin-top: 2px;
text-decoration:none;
}

/* Custom Checkbox */

.checkbox {
opacity: 0; /* display:none may cause problems with form validation */
position: absolute;
}

.checkbox,
.label {
display: inline-block;
vertical-align: middle;
cursor: pointer;
}

.label {
position: relative;
}

.checkbox + .label:before {
content: '';
background: #fff;
border: 1px solid #ccc;
border-radius: 3px;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
padding: 2px;
margin: -3px 7px 0 0;
text-align: center;
box-sizing: border-box;
}

.checkbox:checked + .label:before {
content: "\6d";
font-family: "sample-font";
font-size: 11px;
background: #2892ed;
border: none;
color: #fff;
line-height:11px;
}
CSS
(function($) {
var formInput = $(".input");

function checkEmpty(checkInput) {
if(checkInput.val()) {
checkInput.addClass("has-text");
} else {
checkInput.removeClass("has-text");
}
}

formInput.each(function(){
checkEmpty($(this));
});

formInput.change(function(){
checkEmpty($(this));
});
})(jQuery);
JavaScript/jQuery 1.x
Plugins used:
jQuery Apache 2.0
Browser support:
           
11+