"Mix & Match Login"
Bootstrap 3.1.0 Snippet by christoskastriti

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet"> <link href="js.js" rel="stylesheet"> <link href="stylesheet.css" rel="stylesheet"> <div class="row" style="margin-top:20px"> <div class="col-xs-12 col-sm-8 col-md-6 col-sm-offset-2 col-md-offset-3"> <form role="form" style="background:white; padding-top: 21px; padding-bottom: 36px; padding-left: 36px; padding-right: 36px; border-radius:3px;"> <fieldset> <h2 class="landing">Let's get social!</h2> <hr class="colorgraph"> <div class="form-group"> <input type="email" name="email" id="email" class="form-control input-lg" placeholder="Email Address"> </div> <div class="form-group"> <input type="password" name="password" id="password" class="form-control input-lg" placeholder="Password"> </div> <div class="row"> <div class="col-xs-6 col-sm-6 col-md-6"> <input type="submit" class="btn btn-lg btn-success btn-block" value="Sign In"> </div> <div class="col-xs-6 col-sm-6 col-md-6"> <a href="" class="btn btn-lg btn-primary btn-block">Get Started</a> </div> </div> </fieldset> </form> </div> </div> </div>
body { background: url("https://d13yacurqjgara.cloudfront.net/users/576253/screenshots/1708124/health_fitness_pattern.png"); background-repeat: repeat; } /* Credit to bootsnipp.com for the css for the color graph */ .colorgraph { height: 5px; border-top: 0; background: #e6d3a7; border-radius: 3px; background-image: -webkit-linear-gradient(left, #e6d3a7 0%, #1bbb95 48%, #392f2f 100%); background-image: -moz-linear-gradient(left, #e6d3a7 0%, #1bbb95 48%, #392f2f 100%)); background-image: -o-linear-gradient(left, #e6d3a7 0%, #1bbb95 48%, #392f2f 100%)); background-image: linear-gradient(to right, #e6d3a7 0%, #1bbb95 48%, #392f2f 100%)); } .body, .btn, .container { font-family: 'Roboto', sans-serif; } .btn-success { background: #1BBB95; border:none; } .btn-success:hover { background: #1BBB95; border-left,border-right,border-top:none; border-bottom: 3px solid #18A987; } .btn-primary { background: #e6d3a7; border:none; } .btn-primary:hover { background: #e6d3a7; border-left,border-right,border-top:none; border-bottom: 3px solid #CDBB91; } .btn-checkbox { background: #e6d3a7; } h2.landing { color:#1BBB95; text-align:center; font-size:45px; } input{ color:#392F2F; } .input-lg:focus { outline: none !important; border-color: #e6d3a7; box-shadow: 0 0 5px #e6d3a7; } body { background-color:#1BBB95; }
$(function(){ $('.button-checkbox').each(function(){ var $widget = $(this), $button = $widget.find('button'), $checkbox = $widget.find('input:checkbox'), color = $button.data('color'), settings = { on: { icon: 'glyphicon glyphicon-check' }, off: { icon: 'glyphicon glyphicon-unchecked' } }; $button.on('click', function () { $checkbox.prop('checked', !$checkbox.is(':checked')); $checkbox.triggerHandler('change'); updateDisplay(); }); $checkbox.on('change', function () { updateDisplay(); }); function updateDisplay() { var isChecked = $checkbox.is(':checked'); // Set the button's state $button.data('state', (isChecked) ? "on" : "off"); // Set the button's icon $button.find('.state-icon') .removeClass() .addClass('state-icon ' + settings[$button.data('state')].icon); // Update the button's color if (isChecked) { $button .removeClass('btn-default') .addClass('btn-' + color + ' active'); } else { $button .removeClass('btn-' + color + ' active') .addClass('btn-default'); } } function init() { updateDisplay(); // Inject the icon if applicable if ($button.find('.state-icon').length == 0) { $button.prepend('<i class="state-icon ' + settings[$button.data('state')].icon + '"></i> '); } } init(); }); });

Related: See More


Questions / Comments: