bootstrap和CSS的幫助像在圖像

Question

我盡力使代碼像但成功。 我不知道如何做到這一點綠色按鈕，在同一時間有白色+加里邊界。必須有兩個背景之間的距離，我沒有它。 另外我不知道我是如何把代碼是正確的。有人請給我一個手。

HTML：

.vous-voulez { 
 
    background-color: #DFE3E4; 
 
} 
 
.vous-voulez-button { 
 
    background-color: #DFE3E4; 
 
    margin: 10px; 
 
} 
 
.recherche { 
 
    background-color: #DFE3E4; 
 
    margin: 10px; 
 
} 
 
.text-p, 
 
.vous-voulez { 
 
    margin-top: 40px; 
 
}

<div class="vous-voulez "> 
 
    <div class="row"> 
 
    <div class="vous-voulez-button col-sm-6"> 
 
     <h4>Vous voulez vendre votre bien rapidement?</h4> 
 
     <button type="button" class="btn btn-success btn-block">Cliquez ici pour une annonce gratuitement!</button> 
 
    </div> 
 
    <div class="recherche col-sm-6"> 
 
     <h4>Recherche par numero de telephone</h4> 
 
     <form> 
 
     <div class="row"> 
 
      <div class="col-sm-9"> 
 
      <input type="text" class="form-control" id="usr" /> 
 
      </div> 
 
      <div class="col-sm-3"> 
 
      <button type="button" class="btn btn-default active">CHERCHER</button> 
 
      </div> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</div> 
 

 
<div class="text-p"> 
 
    <div class="row"> 
 
    <div class="col-sm-6"> 
 
     <div class="row"> 
 
     <div class="col-sm-9"> 
 
      <p>Cliquez sur l'une des icones suivantes pour masquer la recherche</p> 
 
     </div> 
 
     <div class="col-sm-3"> 
 
      <button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-down" aria-hidden="false"></span> 
 
      </button> 
 
      <button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-down" aria-hidden="true"></span> 
 
      </button> 
 
      <button type="button" class="btn btn-default active"><span class="glyphicon glyphicon-arrow-up" aria-hidden="true"></span> 
 
      </button> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <div class="col-sm-6"> 
 
     <div class="row"> 
 
     <div class="col-sm-9"> 
 
      <p>Aimeriez-vous promouvoir votre actiuvite ou produit? <a href="#">Consultez nos tarifs</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

請不要嘗試此代碼，這將幫助你

.btn-success { 
    color: #fff; 
    background-color: #023014; 
    border-color: #fff; 
    border-width: 3px; 
    border-radius: 0; 
    box-shadow: 0px 0px 0 3px #5f5f5f; 
}