Google like Search bar

      No Comments on Google like Search bar

Google like Search bar:

Google like Search bar

Google like Search bar

HTML:

<div class="col-md-6 scanfcode_googel_cnt">
<input class="google_in"/></div>
<div class="btn_cnt_google">
<button class="btn sc-btn">Google Search</button><button class="btn sc-btn">I'm Feeling lucky</button>
</div>

CSS:

.scanfcode_googel_cnt
{
 width:100%;
 padding:0px 0px;
 background-color:#fff;
 box-shadow:0px 1px 2px 1px #ccc;
 height:38px;
}
.scanfcode_googel_cnt:hover,input:focus
{
  box-shadow:0px 2px 6px 2px #ccc;
}
.scanfcode_googel_cnt input
{
  border:solid 0px lightgray;
  width:100%;
  height:38px;
  padding:0px 20px;
}
.btn_cnt_google
{
   text-align:center;
   width:100%;
   margin-top:30px;
}
.sc-btn
{
  color:#757575;
  background-color: #f2f2f2;
  border: 1px solid #f2f2f2;
  border-radius: 2px;
  cursor: default;
  font-family: arial,sans-serif;
  font-size: 13px;
  font-weight: bold;
  margin: 11px 4px;
  min-width: 54px;
  padding: 0 16px;
  text-align: center;
  height:36px;
}
.sc-btn:hover
{
   background-color: #f2f2f2;
   border: 1px solid #b3b3b3;
   border-radius: 2px;
   color:#000;
   box-shadow:0px 1px 1px 0px #ccc;
}

Leave a Reply

Your email address will not be published. Required fields are marked *