<form>

<input name="username" placeholder="username" id="username" />

<label for="username">Username</label>

<input name="password" placeholder="password" id="password" />

<label for="password">Password</label>

<input type="submit" value="Log In" />

</form>

@import url(https://fonts.googleapis.com/css?family=Roboto:400,700,900);

@import url(http://weloveiconfonts.com/api/?family=entypo);

html, body {

padding: 0;

margin: 0;

background-image: _linear-gradient(135deg, rgba(155, 89, 182, 0.8) 0%, rgba(211, 84, 0, 0.8) 100%...),
url("http://www.hdbackgroundpoint.com/wp-content/uploads/2014/05/24/453.jpeg");

background-repeat: no-repeat;

background-position: center center;

background-attachment: fixed;

background-size: cover;

}
form {

position: absolute;

top: 0;

left: 0;

right: 0;

bottom: 0;

width: 80%;

height: 40px;

box-sizing: border-box;

margin: auto;

background: white;

border-radius: 4px;

box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);

min-width: 300px;

display: flex;

justify-content: space-between;

input {

box-sizing: border-box;

color: #666;

height: 100%;

padding: 20px 20px 20px 40px;

border: 0;

flex: 10 10 1px;
}

input:focus {

outline: none;

input:focus + label:after {

color: #666;

input#username {

border-radius: 4px 0 0 4px;

input[type="submit"] {

flex: 0 0 100px;

background: #ED6F70;

border: 0;

border-radius: 0 4px 4px 0;

font-family: Roboto;

color: white;

padding: 0;

text-transform: lowercase;

letter-spacing: 2px;

font-size: 14px;
 line-height: 8px;

text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);

cursor: pointer;

label {

font-size: 0;

label[for="username"] {

flex: 0 0 30px;

label[for="username"]:after, label[for="password"]:after {

content: '\1F464';

font-family: entypo;

position: absolute;

top: 50%;

left: 13px;

text-indent: 0;

font-size: 18px;

margin-top: -10px;

color: #ccc;

}
label[for="password"]:before {

position: absolute;

top: 50%;

left: calc(50% - 40px);

text-indent: 0;

content: '';

width: 1px;

height: 30px;

margin-top: -15px;

border-left: 1px solid #ccc;

transform: rotate(15deg);

label[for="password"]:after {

content: '\1F512';

left: calc(50% - 15px);

::-webkit-input-placeholder {

color: #ccc;

:-moz-placeholder {

/* Firefox 18- */

color: #ccc;
}

::-moz-placeholder {

/* Firefox 19+ */

color: #ccc;

:-ms-input-placeholder {

color: #ccc;