<div class="grid-container">
  <form>
    <h3>Radio Button Group with Foundation 6 for sites</h3>
    <p>You can only select one item</p>
    <div class="button-group round toggle">
      <input type="radio" id="r1" name="r-group">
      <label class="button" for="r1">Left</label>
      <input type="radio" id="r2" name="r-group">
      <label class="button" for="r2">Middle</label>
      <input type="radio" id="r3" name="r-group">
      <label class="button" for="r3">Right</label>
    </div>
    <h3>Checkbox Button Group with Foundation 6 for sites</h3>
    <p>You can select multiple items at once</p>
    <div class="button-group">
      <input id="checkbox1" type="checkbox">
      <label class="button" for="checkbox1">Left</label>
      <input id="checkbox2" type="checkbox">
      <label class="button" for="checkbox2">Middle</label>
      <input id="checkbox3" type="checkbox">
      <label class="button" for="checkbox3">Right</label>
    </div>
  </form>
</div>

body{
  text-align: center
}
$selected-color: salmon;

.button-group input{
  display: none;
}

.button-group input:checked + label,
.button-group input:checked + label:active {
  background-color: $selected-color;
}