Zurb Foundation Color Palette Add Colors

_buttons.html

<div class="row">
	<a class="button large primary" href="#">Primary</a><br>
	<a class="button large secondary" href="#">Secondary</a><br>
	<a class="button large success" href="#">Success</a><br>
	<a class="button large alert" href="#">Alert</a><br>
	<a class="button large warning" href="#">Warning</a><br>
	<a class="button large alt" href="#">Alt</a><br>
	<a class="button large action" href="#">Action</a><br>
</div>

_colors.scss

$lime: #A19F36;
$teal: #1D5158;

$foundation-palette: (
    primary: #1779ba,
    secondary: #767676,
    success: #3adb76,
    warning: #ffae00,
    alert: #cc4b37,
    alt: $lime,
    action: $teal,
);

$alt-color: get-color(alt);
$action-color: get-color(action);

Zurb_Foundation_Color_Palette_Add_Colors.md

Adding to the Zurb Color Palette

This gist shows how you can add your own custom colors to the Zurb Foundation color palette.

They new colors can then be used to create custom buttons. The color sass variable is also avaliable using the get-color() function.

Reference

http://foundation.zurb.com/sites/docs/button.html

http://foundation.zurb.com/sites/docs/global.html