HTML:
Código
<!DOCTYPE html> <html lang="es"> <head> <meta charset="UTF-8"/> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"/> <link rel="stylesheet" href="assets/css/login.css"/> </head> <body> <div id="flogin" class="flogin"> <section class="left-side"> <section class="head"> LOGIN </section> <section class="body"> <section class="data"> <section class="form-group"> <section class="input-wrapper"> <input type="text" id="txt-username" class="txt"/> </section> </section> <section class="form-group"> <section class="input-wrapper"> <input type="password" id="txt-password" class="txt"/> </section> </section> </section> <section class="help"> </section> </section> </section> <section id="btn-login" class="right-side"> </section> </div> </body> </html>
CSS:
Código
.flogin { display: flex; justify-content: space-between; width: 400px; } .flogin > .left-side { background-color: #363636; /*background: radial-gradient(#555, #363636, #363636);*/ box-shadow: 0px 0px 20px 20px #2e2e2e inset; border: 9px solid #dedede; border-right: none; border-radius: 20px 0px 0px 20px; width: 80%; } .flogin > .right-side { align-items: center; background-color: #34B5D5; border: 9px solid #dedede; border-left: none; border-radius: 0px 20px 20px 0px; display: flex; flex-flow: column nowrap; justify-content: space-between; padding: 1.3rem .2rem; width: calc(20% - 2*.2rem - 9px); } .flogin > .right-side:hover { cursor: pointer; } /********************* LEFT SIDE *********************/ .left-side > .head { border-bottom: 2px dashed #ddd; color: #eee; font-family: "segoe ui"; margin-bottom: 20px; padding: .75rem 1rem; } .left-side > .body { padding: .8rem 1.35rem; width: calc(100% * 2*1.35rem); } .body > .data { display: flex; justify-content: space-between; } .form-group { width: 45%; } .form-group > span { color: #ddd; display: block; font-family: "segoe ui"; font-size: 10pt; margin-bottom: 7px; } .form-group > .input-wrapper { align-items: center; background-color: white; border-radius: 5px; box-shadow: 0px 2px 5px 1px rgba(0,0,0,.4) inset, 0px -1px 2px 1px rgba(0,0,0,.25) inset; display: flex; justify-content: space-between; } .input-wrapper > .txt { width: 80%; } .input-wrapper > i { color: gold; width: 20%; } .txt { background-color: transparent; border: none; border-radius: 5px; padding: .4rem .25rem; width: calc(80% - 2*.35rem - 2*1px); } .txt:focus { outline: none; } .help { display: flex; justify-content: flex-end; } a { color: #ddd; display: block; font-family: "segoe ui"; font-size: 10pt; font-style: italic; margin-top: 20px; text-align: right; text-decoration: none; } /***************** RIGHT SIDE *****************/ .right-side > i { color: #fff; display: block; } .right-side > span { color: #fff; display: block; font-family: "segoe ui"; font-size: 16pt; }
Resultado:
Saludos.