Bootstrap and CSS help like in the image

Question

I tried so hard to make the code like in but with success. I don't know how to do that green button to have white + gary border in the same time. The have to have a distance between the two backgrounds and I don't have it. Plus I'm not sure if how I put the code is correct. Someone please give me a 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

Please do try this code and this will help you

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