Group search button with label

Group search button with label

by Ayyappan Sakthivadivel

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="input-group">
  <div class="input-group-btn">
		<label class="btn btn-default ptr-evnt-non srch-hldr">
        <i class="glyphicon glyphicon-search"></i>
    </label>
		<label class="btn btn-default ptr-evnt-non find-hldr">Find</label>
	</div>	
  
	<input type="text" class="form-control srch-txt" name="q" placeholder="Search.." id="search_key" value="">
	<span class="input-group-btn">
			<button class="btn btn-default srch-cls-btn" href="">
      <i class="glyphicon glyphicon-remove"></i> 
      </button>
			<button class="btn btn-info wsh-srch-btn" type="submit">Go</button>
	</span>
</div>

CSS

body{
  margin: 20px;
}
label.ptr-evnt-non{
        pointer-events: none;
    }
    
    .srch-hldr{
      border-right: none;
    }
    
    .btn-default.srch-hldr{
      -webkit-border-top-left-radius: 20px;
      -webkit-border-bottom-left-radius: 20px;
      -moz-border-radius-topleft: 20px;
      -moz-border-radius-bottomleft: 20px;
      border-top-left-radius: 20px;
      border-bottom-left-radius: 20px;
    }
    
    .find-hldr{
      border-left: none;
      border-right: none;
    }    

    .srch-cls-btn{
      border-left: none;
    }

    .srch-txt{
      border-left: none;
    }
    
    .wsh-srch-btn{
      -webkit-border-top-right-radius: 20px;
-webkit-border-bottom-right-radius: 20px;
-moz-border-radius-topright: 20px;
-moz-border-radius-bottomright: 20px;
border-top-right-radius: 20px;
border-bottom-right-radius: 20px;
    }