<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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 id="quick-access"> <form class="form-inline quick-search-form" role="form" action="#"> <div class="form-group"> <input type="text" class="form-control" placeholder="Search here"> </div> <button type="submit" id="quick-search" class="btn btn-custom"><span class="glyphicon glyphicon-search custom-glyph-color"></span></button> </form> </div> </div>

.quick-search-form .form-control { height: 35px; padding: 8px 15px; color: #a4a4a4; /* change color of text to be typed inside search box */ font-size: 13px; line-height: 20px; background-color: transparent; border: 1px solid #ccc; border-radius: 0!important; -webkit-box-shadow: none; box-shadow: none; } .btn-custom { color: ##FFFFFF; background-color: #7bae23; /* change button color */ border-radius: 0!important; /* button border radius */ padding: 6px 10px; /* Button size change*/ } .btn-custom:hover{ background-color:#9AC94B; /* change button color on hover */ border-radius: 0!important; } .custom-glyph-color{ color:#fff; /* change magnifying glass color in button */ } .custom-glyph-color:hover{ color:#b1b1b1; /* change magnifying glass color in button on mouse hover */ }