"Login inspired by google"
Bootstrap 3.3.0 Snippet by villander

<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container formulario"> <div class="card card-container"> <div class="headerInformacao"> <img class="imgPerfil" src="//lh4.googleusercontent.com/-fd2HgyJH_is/AAAAAAAAAAI/AAAAAAAAAAA/jYtI9MrvLcE/photo.jpg?sz=120"> </div> <form role="form" class="formLogin" method="post" action=""> <div class="form-group"> <input type="email" class="form-control" name="email" placeholder="Email"required="required"> </div> <div class="form-group"> <input type="text" class="form-control" name="senha" placeholder="Senha"required="required"> </div> <div class="form-actions"> <button type="submit" onclick="" name="btnSubmit"class="btn btn-primary enviarDados">Login</button> </div> </form> </div> </div>
@import url(http://fonts.googleapis.com/css?family=Montserrat:400,700); html, body { height: 100%; } .formulario { height: 100%; background-color: white; border: 1px solidrgba(0, 0, 0, 0.3); } .card-container.card { width: 600px; height: 400px; top: 50%; position: absolute; left: 50%; margin-left: -300px; margin-top: -200px; } .card { background-color: #F7F7F7; padding: 20px 25px 30px; margin: 0 auto 25px; margin-top: 50px; -moz-border-radius: 2px; -webkit-border-radius: 2px; border-radius: 2px; -moz-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.3); } .headerInformacao{ height: 120px; } .imgPerfil{ position: absolute; width:100px; height:100px; position:absolute; left:50%; margin-left:-50px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; } } .formLogin { margin-top: 50px; height:100%; } .form-group { margin-bottom: 35px; } .form-control { boder: none; border-radius: 0; height: 40px; } /* Botão Calcular */ .enviarDados { background: #3498db; width: 300px; height: 50px; border: 2px solid white; border-radius: 0; font-family: 'Montserrat', Arial, Helvetica, sans-serif; font-size: 24px; font-weight: 500; } .enviarDados:hover, .enviarDados:focus, .enviarDados:active { color: white; border:2px solid white; } .enviarDados:hover:before, .enviarDados:focus:before, .enviarDados:active:before { -webkit-transform: scaleX(1); transform: scaleX(1); } .form-actions { text-align: center; }

Related: See More


Questions / Comments: