如何在不影响我的CSS效果的情况下用asp.net按钮替换css / bootstrap按钮？

Question

我正在尝试在我的asp.net项目中创建一个搜索栏，到目前为止我只知道如何使用CSS / bootstrap来生成与我添加的css效果一致的按钮。如何更改我的代码以使用asp.net按钮 - 而不影响我的CSS效果？这就是asp.net按钮的样子：

<asp:Button ID="Button1" runat="server" Text="Button" />

我正在更改为asp.net按钮，因为我意识到CSS / bootstrap按钮没有将我带到asp.net中的代码视图所需的onclick（因为我需要在按钮中添加C＃代码）。

以下是我的按钮目前的样子：

<div class="sb_container">
      <input type="text" placeholder="Search..." id="sew_searchBox" class="search"> </input>

      <button class="icon" onclick="keyotiSearchBox.doSearch()"></button> 
  </div>

我也在这个按钮中添加了Css：

   .sb_container{
      overflow: hidden;
      width: 220px;
      vertical-align: middle;
      white-space: nowrap;
   }

   .sb_container input.search{ 
      width: 200px; 
      height: 35px; 
      background: #FFF; 
      border: none; 
      font-size: 10pt; 
      float: left; 
      color: #000000; 
      padding-left: 15px; 
      -webkit-border-radius: 5px; 
      -moz-border-radius: 5px; 
      border-radius: 5px;
       }
   .sb_container input.search::-webkit-input-placeholder { color: black;}
   .sb_container input.search:-moz-placeholder { /* Firefox 18- */ color: black; }
   .sb_container input.search::-moz-placeholder {  /* Firefox 19+ */ color: black; }
  .sb_container input.search:-ms-input-placeholder {  color: black; }

  .sb_container button.icon {
    -webkit-border-top-right-radius: 5px;
    -webkit-border-bottom-right-radius: 5px;
    -moz-border-radius-topright: 5px;
    -moz-border-radius-bottomright: 5px;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    border: none;
    background: #f7f7f7;
    height: 35px;
    width: 50px;
    color: #4f5b66;
    opacity: 0;
    font-size: 10pt;

   -webkit-transition: all .55s ease; 
      -moz-transition: all .55s ease; 
      -ms-transition: all .55s ease; 
      -o-transition: all .55s ease; 
      transition: all .55s ease;
}

    .sb_container:hover button.icon, .sb_container:active button.icon, .sb_container:focus button.icon{ 
      outline: none; 
      opacity: 1; 
      margin-left: -50px;
      background-image:url('search.png');    
      background-repeat: no-repeat;  
      background-position: center; 
}

.sb_container:hover button.icon:hover{ 
      background: #f7f7f7;
      background-image:url('search.png');    
      background-repeat: no-repeat;background-position: center; 
}