I'm getter alert background applied to the entire cell

    <div class="cell ">
	<div class="button-group primary tight-bot margin-top-1">
		<a class="button success " href="/tasks/new">Add</a>
		<a class="button " href="/tasks?search%5Btype%5D=my">My Tasks</a>
		<a class="button " href="/tasks">All Tasks</a>
	</div>
    </div>

inspector give this rule applied:

    /* line 198, ./../../../node_modules/foundation-sites/scss/components/_button.scss */
    .button-group.alert .button, .button-group.alert .button.disabled, .button-group.alert .button[disabled], .button-group.alert .button.disabled:hover, .button-group.alert .button[disabled]:hover, .button-group.alert .button.disabled:focus, .button-group.alert .button[disabled]:focus,
    .button-group,
    .button-group.disabled,
    .button-group[disabled],
    .button-group.disabled:hover,
    .button-group[disabled]:hover,
    .button-group.disabled:focus,
    .button-group[disabled]:focus {
      background-color: #cc4b37;
      color: #fefefe;
    }

Fixed by adding:

/*
foundation fix
 */
.button-group {
  background-color: transparent;
  color: $black;
}