<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 style="padding:50px;"> <a class="btn btn-lg btn-default btn-block btn-section"> <span>Login to the Mpix System</span> <span class="pull-right"><i class="glyphicon glyphicon-chevron-right"></i></span> </a> </div>

.btn-section { padding: 18px 20px 20px 20px; border-left: 5px solid green; text-align:left; } .btn-section.active { border-left-color:green; } .btn-section:hover { border-left-color:green; }

$(document).ready(function() { $(document).on('click', '.btn-section', function(e) { if ($(this).hasClass('active')) { $(this).removeClass('active'); } else { $(this).addClass("active"); } }); });