User login based on http://dribbble.com/shots/598906-User-Login

dabblet.css

/**
 * User login based on http://dribbble.com/shots/598906-User-Login
 */
 
 body { background-color: #f1f6f9}
 
 * { 
 appearance: none!important
 margin: 0;
 padding: 0;
 border: 0;
 box-sizing: border-box;
 font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
 }

#login_wrapper{
width: 290px;
height: 215px;
margin: 100px auto;
border: 1px solid #cecece;
background-color: #f8f8f7;
border-radius: 5px;


}

h1{
height: 50px;
line-height: 50px;
font-size: 12px;
text-align: center;
text-transform:uppercase;
margin: 0;
border-bottom: 1px solid #cecece;
background-color: #fdfdfd;
background-image: url(data:image/png;base64,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);
  box-shadow: inset 0px -1px 1px 0px rgba(0,0,0,0.1);
}

#inputs{
  margin: 20px;
  border: 1px solid #cecece;
  background-color: #fff;
  border-radius: 5px;
  box-shadow: inset 0px 1px 2px 0px rgba(0,0,0,0.2);

}
#user{
 border-bottom: 1px solid #cecece;
 background: transparent;
 margin: 0 15px;
 height: 35px;
 line-height: 35px;
 padding-left: 20px;
 width: 216px;
outline: none;
position: relative;
}

#user:before{
 content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAAKCAIAAADtkjPUAAAAA3NCSVQICAjb4U/gAAAAEHRFWHRTb2Z0d2FyZQBTaHV0dGVyY4LQCQAAAKdJREFUGNN1issKgkAARe+MghPouPARpK30//+h+glF3TTZLiFHDROcFpJC2lkd7j2k714AACilsjx7VJXrOHEUE0KmXccXcRNXIQC0bcvY7hiG007nouu6TV8KSrXZNY1uFLZtb/pS7H3fMk0AnHPP9X4L2cgkTd/DAKDv+yRNZCOnizTPOi+K8l5iRXAI4igil9O5ljX+wC2uM2YoZVFK1/c4jowZH0jZP5ARBwAJAAAAAElFTkSuQmCC);
 position:absolute;
 left:0;
}

#pass {
text-security: square;
margin: 0 15px;
 background: transparent;
  width: 216px;
outline: none;
padding-left: 20px;
height: 35px; line-height: 35px;
position: relative;
}
#pass:before{
 content:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAsAAAALCAIAAAAmzuBxAAAAA3NCSVQICAjb4U/gAAAAEHRFWHRTb2Z0d2FyZQBTaHV0dGVyY4LQCQAAAO5JREFUGNNtj01PwlAUROe2LxGMhQV+hEIksrKsZWv1x6vBHyCliZqUFgKkWht6+15jfS4wlCbO9pxMZkhxLqWc+bNtlrVb7cHg0jqxcBD6+vicPE8A/GhdliURjW/GLauSjBdv+l2W7q17796Zpqm19n3/sEMkSSKEkFIqpbTWAKSSNeO001lvNg9PjzsMwDCMQ8MYXg0B7DEAZp56XrVUcZ6m6ev7GzMTETPvQM+2nWvnz9jrWutoEWUZz8M5ALvbHTkjUbtO1O/1AazWq6IoFsslEdU6qil5HkZhEAQABP7LcbN5cXYex3HjqPEL36x4/I9ppuoAAAAASUVORK5CYII=);
 position:absolute;
 left:0;
}

#or {
float: left;
 height: 33px;
line-height: 33px;
margin-left: 25px;
font-size: 12px;
text-align: center;
font-style: italic;
 text-shadow: 0 1px 1px #fff;
 color: #484848;
}

#login, #signup{
 width: 90px;
 float: left;
 height: 33px;
 line-height: 33px;
 text-indent: 15px;
 text-align: center;
 font-size: 13px;
 color: #484848;
 margin-left: 20px;
 text-transform: uppercase;
 background-color: #ebebeb;
 text-shadow: 0 1px 1px #fff;

 background-image: linear-gradient(#f9f9f9, #ebebeb);
 box-shadow:
 	inset 0px 1px 0px 0px rgba(255,255,255,0.2),
	inset 0px -1px 0px 0px rgba(0,0,0,0.2);
-webkit-filter: drop-shadow(rgba(0,0,0,0.3) 0px 1px 3px);
position: relative;
border-radius: 3px 0 0 3px ;
}

#login:after{
position: absolute;
content:"";
display:block;
height: 33px;
width: 30px;
background: red;
right: -30px;
top: 0px;
 box-shadow:
 	inset 0px 1px 0px 0px rgba(255,255,255,0.2),
	inset 0px -1px 0px 0px rgba(0,0,0,0.2);




 background-image: linear-gradient(#f9f9f9, #ebebeb);
-webkit-mask: radial-gradient(100% 50%, circle, rgba(204,0,0,0) 20px, #ebebeb 17px);

background-size: 100% 100%;
background-repeat: no-repeat;

}


#signup{ 
float:right; 
text-indent: -15px;
margin: 0 20px 0 0;
border-radius: 0 3px 3px 0;
}


#signup:before{
position: absolute;
content:"";
display:block;
height: 33px;
width: 30px;
left: -30px;
top: 0px;
 box-shadow:
 	inset 0px 1px 0px 0px rgba(255,255,255,0.2),
	inset 0px -1px 0px 0px rgba(0,0,0,0.2);




 background-image: linear-gradient(#f9f9f9, #ebebeb);
-webkit-mask: radial-gradient(0% 50%, circle, rgba(204,0,0,0) 20px, #ebebeb 17px);



background-size: 100% 100%;
background-repeat: no-repeat;

}


#login:active, #signup:active{
margin-top: 2px;
transform: scale(0.95);
}

dabblet.html

<div id="login_wrapper">
<h1> user login </h1>
<form>
<fieldset id="inputs">
<input id="user" placeholder="Username" >
<input id="pass" placeholder="Password" />
</fieldset>
<fieldset id="buttons">
<div id="login">Login</div>
<div id="or">or</div>
<div id="signup">Sign up</div>
</fieldset>

</form>
</div>

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}