"Simple Login With Semi - Transparent Input"
Bootstrap 3.3.0 Snippet by ReloadedID

<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"> <div class="row"> <center> <form action="checking.php" method="post" name="Login_Form"> <div class="colorgraph"><br><br><br> <font face="Lato" size="8">Login</font><br><br><br> <input type="text" class="form-control" name="username" placeholder="Username atau email" required="" autofocus="" />    <input type="password" class="form-control" name="password" placeholder="Password" required=""/><br><br> <button class="colorgraph3"><font face="Lato" size="5" color="f7fdca">Login</font></button><br><br> <hr width="520" color="#f7fdca"> </div> </form> </center> </form> </div> </div>
.wrapper { margin-top: 80px; margin-bottom: 20px; } .form-signin { max-width: 900px; padding: 30px 38px 66px; margin: 0 auto; background-color: #05D4D0; border: 3px dotted rgba(0,0,0,0.1); } .form-signin-heading { text-align:left; margin-bottom: 30px; } .form-control { background: rgba(0,0,0,0.5); width: 300; position: relative; font-size: 18px; color: white; height: auto; padding: 10px; } input[type="text"] { margin-bottom: 0px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } input[type="password"] { margin-bottom: 20px; border-top-left-radius: 0; border-top-right-radius: 0; } .colorgraph { height: 400px; border-top: 0; background: #c4e17f; border-radius: 5px; background-image: -webkit-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #f7fdca 12.5%, #f7fdca 87.5%, #c4e17f 87.5%, #c4e17f); background-image: -moz-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #f7fdca 12.5%, #f7fdca 87.5%, #c4e17f 87.5%, #c4e17f); background-image: -o-linear-gradient(left, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #f7fdca 12.5%, #f7fdca 87.5%, #c4e17f 87.5%, #c4e17f); background-image: linear-gradient(to right, #c4e17f, #c4e17f 12.5%, #f7fdca 12.5%, #f7fdca 25%, #fecf71 25%, #fecf71 37.5%, #f0776c 37.5%, #f0776c 50%, #db9dbe 50%, #db9dbe 62.5%, #c49cde 62.5%, #c49cde 75%, #f7fdca 12.5%, #f7fdca 87.5%, #c4e17f 87.5%, #c4e17f); } .colorgraph3 { height: 50px; width: 200px; border-top: 0; background: #c4e17f; border-radius: 5px; background-image: -webkit-linear-gradient(left, #c4e17f 37.5%, #c4e17f 50%, #c4e17f 50%, #c4e17f ); background-image: -moz-linear-gradient(left, #c4e17f 37.5%, #c4e17f 50%, #c4e17f 50%, #c4e17f ); background-image: -o-linear-gradient(left, #c4e17f 37.5%, #c4e17f 50%, #c4e17f 50%, #c4e17f ); background-image: linear-gradient(to right, #c4e17f 37.5%, #c4e17f 50%, #c4e17f 50%, #c4e17f ); }

Related: See More


Questions / Comments: