画像のようなブートストラップとCSSヘルプ

Question

のようなコードを作るのは大変でしたが、成功しました。 私はその緑のボタンを使って、同じ時間に白+ゲイリーボーダーを持つ方法を知りません。 2つの背景の間に距離がある必要があり、私はそれを持っていません。 プラスコードが正しいかどうかわかりません。誰かが私に手を差し伸べてください。

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; 
}