Bootstrap Snippet Expanding Search Button using HTML CSS Bootstrap

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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 ---------->
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="container">
    <div class="row">
        <div class="col-lg-12">
            <h3 class="department-news-header">
                <a href="#">Resources</a>
                <span class="archive-link pull-right">
                    <a href="#link">
                        <i class="fa fa-external-link"></i>
                    </a>
                </span>
                <span class="archive-link pull-right header-search-span">
                    <span class="header-search">
                        <input type="text" class="form-control input-sm" maxlength="64" placeholder="Search" />
                        <a href="#link" role="button" class="btn-srch"><i class="fa fa-search"></i></a>
                    </span>
                </span>
            </h3>
        </div>
    </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
.home-news-header, .department-news-header, .sidebar-header {
    color: #335576 !important;
    border-bottom: 2px solid #695e4a;
    padding-bottom: 10px;
}
.home-news-header > a, .department-news-header > a, .sidebar-header > a {
    color: #335576 !important;
}
.home-news-header span.archive-link a, .department-news-header span.archive-link a,
.home-news-header span.archive-link span a, .department-news-header span.archive-link span a {
    color: #335576 !important;
}
.header-search-span {
    float: right;
    width: 250px;
    display: inline-block;
}
.header-search {
    width: 230px;
    position: relative;
    float: left;
}
    .header-search input {
        position: absolute;
        width: 0px;
        float: Left;
        margin-left: 210px;
        -webkit-transition: all 0.7s ease-in-out;
        -moz-transition: all 0.7s ease-in-out;
        -o-transition: all 0.7s ease-in-out;
        transition: all 0.7s ease-in-out;
        border-radius:0;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Expanding Search Button"
Bootstrap 3.3.0 Snippet by ChrisSTL

Related: See More

Questions / Comments:

"Expanding Search Button" Bootstrap 3.3.0 Snippet by ChrisSTL

Related: See More

Questions / Comments:

"Expanding Search Button"
Bootstrap 3.3.0 Snippet by ChrisSTL