"Custom Bootstrap Search Button"
Bootstrap 3.2.0 Snippet by roxid

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<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>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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 */
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Material Dashboard Pro React
Hexa shape button
Awesome Search Box
Carousel with Search

Questions / Comments: