Essai boutons formulaire

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css&quot; integrity=&quot;sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
<div class="container">
  <div class="row">
    <div class="col-lg-12">
        <h1>Formulaire</h1>

        <fieldset>
        <legend>Legend</legend>
        <div id="ck-button">
            <label>
              <input type="radio" name="optionsRadios"  value="0"><span>un Homme ou Garçon</span>
            </label>
          </div>

          <div id="ck-button">
            <label>
              <input type="radio" name="optionsRadios"  value="1"><span>une Femme ou Fille</span>
            </label>
          </div>

          <div id="ck-button">
            <label>
              <input type="radio" name="optionsRadios"  value="2"><span>un Couple</span>
            </label>
          </div>
        </fieldset>

      </div>
    </div>
  </div>

CSS

div label input {
   margin-right:100px;
}

body {
    font-family:sans-serif;
}

#ck-button {
    margin:4px;
    background-color:#EFEFEF;
    border-radius:50px;
    border:1px solid #D0D0D0;
    overflow:auto;
    float:left;
}

#ck-button:hover {
    background:#b9c8ff;
    color:#333480;
}

#ck-button label {
    float:left;
    margin-bottom: 0px;
       
}

#ck-button label span {
    text-align:center;
    padding:10px 15px;
    display:block;
       user-select: none;
}

#ck-button label input {
    position:absolute;
    top:-20px;
    visibility:hidden;
}

#ck-button input:checked + span {
    background-color:#6682e6;
    color:#fff;
}