<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 ---------->
<div class="">
<div class="card hovercard">
<div class="card-background">
<img class="card-bkimg" alt="" src="http://www.busonlineticket.com/booking/images/train-tickets.png">
<!-- http://lorempixel.com/850/280/people/9/ -->
</div>
<div class="useravatar">
<img alt="" src="http://www.busonlineticket.com/booking/images/train-tickets.png">
</div>
<div class="card-info"> <span class="card-title">Booking Ticket</span>
</div>
</div>
<div class="btn-pref btn-group btn-group-justified btn-group-lg" role="group" aria-label="...">
<div class="btn-group" role="group">
<button type="button" id="stars" class="btn btn-primary" href="#tab1" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">One-Way</div>
</button>
</div>
<div class="btn-group" role="group">
<button type="button" id="favorites" class="btn btn-default" href="#tab2" data-toggle="tab"><span class="glyphicon glyphicon-star" aria-hidden="true"></span><span class="glyphicon glyphicon-star" aria-hidden="true"></span>
<div class="hidden-xs">Round-trip</div>
</button>
</div>
</div>
<div class="well">
<div class="tab-content">
<div class="tab-pane fade in active" id="tab1">
<div class="form-group">
<div class="form-group col-lg-6" >
<input type="text" name="" class="form-control" id="" value="" placeholder="From">
</div>
<div class="form-group col-lg-6" >
<input type="text" name="" class="form-control" id="" value="" placeholder="To">
</div>
</div>
<div class="form-group col-lg-6">
<div class="input-group" >
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="date" class="form-control" placeholder="depart" />
</div>
</div>
<div class="form-group col-lg-6">
<div class="input-group" >
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="Passengers" />
</div>
</div>
<a href="http://www.jquery2dotnet.com" class="btn btn-primary btn-lg btn3d" role="button"><span class="glyphicon glyphicon-tag">Find Ticket</a>
</div>
<div class="tab-pane fade in" id="tab2">
<div class="form-group">
<div class="form-group col-lg-6" >
<input type="text" name="" class="form-control" id="" value="" placeholder="From">
</div>
<div class="form-group col-lg-6" >
<input type="text" name="" class="form-control" id="" value="" placeholder="To">
</div>
</div>
<div class="form-group col-lg-6">
<div class="input-group" >
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="date" class="form-control" placeholder="depart" />
</div>
</div>
<div class="form-group col-lg-6">
<div class="input-group" >
<span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span></span>
<input type="date" class="form-control" placeholder="depart" />
</div>
</div>
<div class="form-group col-lg-6">
<div class="input-group" >
<span class="input-group-addon"><span class="glyphicon glyphicon-user"></span></span>
<input type="text" class="form-control" placeholder="Passengers" />
</div>
</div>
<a href="http://www.jquery2dotnet.com" class="btn btn-primary btn-lg btn3d" role="button"><span class="glyphicon glyphicon-tag">Find Ticket</a>
</div>
</div>
</div>
/* USER PROFILE PAGE */
.btn3d {
position:relative;
top: -6px;
border:0;
transition: all 40ms linear;
margin-top:10px;
margin-bottom:10px;
margin-left:2px;
margin-right:2px;
}
.btn3d:active:focus,
.btn3d:focus:hover,
.btn3d:focus {
-moz-outline-style:none;
outline:medium none;
}
.btn3d:active, .btn3d.active {
top:2px;
}
.btn3d.btn-primary {
box-shadow:0 0 0 1px #417fbd inset, 0 0 0 2px rgba(255,255,255,0.15) inset, 0 8px 0 0 #4D5BBE, 0 8px 8px 1px rgba(0,0,0,0.5);
background-color:#4274D7;
}
.btn3d.btn-primary:active, .btn3d.btn-primary.active {
box-shadow:0 0 0 1px #417fbd inset, 0 0 0 1px rgba(255,255,255,0.15) inset, 0 1px 3px 1px rgba(0,0,0,0.3);
background-color:#4274D7;
}
.card {
margin-top: 20px;
padding: 30px;
background-color: rgba(214, 224, 226, 0.2);
-webkit-border-top-left-radius:5px;
-moz-border-top-left-radius:5px;
border-top-left-radius:5px;
-webkit-border-top-right-radius:5px;
-moz-border-top-right-radius:5px;
border-top-right-radius:5px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.card.hovercard {
position: relative;
padding-top: 0;
overflow: hidden;
text-align: center;
background-color: #fff;
background-color: rgba(255, 255, 255, 1);
}
.card.hovercard .card-background {
height: 130px;
}
.card-background img {
-webkit-filter: blur(25px);
-moz-filter: blur(25px);
-o-filter: blur(25px);
-ms-filter: blur(25px);
filter: blur(25px);
margin-left: -100px;
margin-top: -200px;
min-width: 130%;
}
.card.hovercard .useravatar {
position: absolute;
top: 15px;
left: 0;
right: 0;
}
.card.hovercard .useravatar img {
width: 100px;
height: 100px;
max-width: 100px;
max-height: 100px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
border: 5px solid rgba(255, 255, 255, 0.5);
}
.card.hovercard .card-info {
position: absolute;
bottom: 14px;
left: 0;
right: 0;
}
.card.hovercard .card-info .card-title {
padding:0 5px;
font-size: 20px;
line-height: 1;
color: #262626;
background-color: rgba(255, 255, 255, 0.1);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
}
.card.hovercard .card-info {
overflow: hidden;
font-size: 12px;
line-height: 20px;
color: #737373;
text-overflow: ellipsis;
}
.card.hovercard .bottom {
padding: 0 20px;
margin-bottom: 17px;
}
.btn-pref .btn {
-webkit-border-radius:0 !important;
}
$(document).ready(function() {
$(".btn-pref .btn").click(function () {
$(".btn-pref .btn").removeClass("btn-primary").addClass("btn-default");
// $(".tab").addClass("active"); // instead of this do the below
$(this).removeClass("btn-default").addClass("btn-primary");
});
});
<div class="form-group col-lg-6">
<input type="text" name="" class="form-control" id="" value="" placeholder="From">
</div>
<div class="form-group col-lg-6">
<input type="text" name="" class="form-control" id="" value="" placeholder="To">
</div>
