Bootstrap und CSS-Hilfe wie im Bild

Question

Ich versuchte so schwer, den Code wie in aber mit Erfolg zu machen. Ich weiß nicht, wie man diesen grünen Knopf macht, um weiß + gary Grenze in der gleichen Zeit zu haben. Die müssen einen Abstand zwischen den beiden Hintergründen haben und ich habe es nicht. Plus Ich bin mir nicht sicher, ob, wie ich den Code richtig gesetzt habe. Jemand bitte gib mir eine Hand.

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

Bitte diesen Code versuchen, und dies wird Ihnen helfen

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