"Simple login form - Bootsnipp style colorgraph"
Bootstrap 3.0.3 Snippet by rajeevj89

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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="wrapper"> <form action="" method="post" name="Login_Form" class="form-signin"> <h3 class="form-signin-heading">Welcome Back! Please Sign In</h3> <hr class="colorgraph"><br> <!--<input type="radio" name="bssv" id="R1" value="bssv1" onclick="updatetext()" checked>AddressBookMasterMBF <input type="radio" name="bssv" id="R2" value="bssv2" onclick="invRealTimeItemAvailabilityInputs()" >InvRealTimeItemAvailability --> <!-- <input type="text" class="form-control" name="Username" placeholder="Username" required="" autofocus="" /> <input type="password" class="form-control" name="Password" placeholder="Password" required=""/> --> <ul class="list-group"> <li class="list-group-item"> Bootstrap Switch Default <div class="material-switch pull-right"> <input id="someSwitchOptionDefault" name="someSwitchOption001" value="bssv1" type="radio" onclick="updatetext()" /> <label for="someSwitchOptionDefault" class="label-default"></label> </div> </li> <li class="list-group-item"> Bootstrap Switch Primary <div class="material-switch pull-right"> <input id="someSwitchOptionPrimary" name="someSwitchOption001" value="bssv2" type="radio" onclick="invRealTimeItemAvailabilityInputs()" /> <label for="someSwitchOptionPrimary" class="label-primary"></label> </div> </li> </ul> <button class="btn btn-lg btn-primary btn-block" name="Submit" value="Login" type="Submit">Login</button> </form> </div> </div>
.wrapper { margin-top: 80px; margin-bottom: 20px; } .form-signin { max-width: 420px; padding: 30px 38px 66px; margin: 0 auto; background-color: #eee; border: 3px dotted rgba(0,0,0,0.1); } .form-signin-heading { text-align:center; margin-bottom: 30px; } .form-control { position: relative; font-size: 16px; height: auto; padding: 10px; } input[type="radio"] { margin-bottom: 0px; border-bottom-left-radius: 0; border-bottom-right-radius: 0; } input[type="radio"] { margin-bottom: 20px; border-top-left-radius: 0; border-top-right-radius: 0; } .colorgraph { height: 7px; 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%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 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%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 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%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); 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%, #669ae1 75%, #669ae1 87.5%, #62c2e4 87.5%, #62c2e4); } .material-switch > input[type="radio"] { display: none; } .material-switch > label { cursor: pointer; height: 0px; position: relative; width: 40px; } .material-switch > label::before { background: rgb(0, 0, 0); box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); border-radius: 8px; content: ''; height: 16px; margin-top: -8px; position:absolute; opacity: 0.3; transition: all 0.4s ease-in-out; width: 40px; } .material-switch > label::after { background: rgb(255, 255, 255); border-radius: 16px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); content: ''; height: 24px; left: -4px; margin-top: -8px; position: absolute; top: -4px; transition: all 0.3s ease-in-out; width: 24px; } .material-switch > input[type="radio"]:checked + label::before { background: inherit; opacity: 0.5; } .material-switch > input[type="radio"]:checked + label::after { background: inherit; left: 20px; }

Related: See More


Questions / Comments: