Menu icon Foundation
Primary class for button

Where can I change the styles for the "primary" class for buttons? I can't for the life of me find it anywhere in the _settings.scss file or anywhere else. Please help, thank you.

buttonprimaryclass

Where can I change the styles for the "primary" class for buttons? I can't for the life of me find it anywhere in the _settings.scss file or anywhere else. Please help, thank you.

Val Ery over 2 years ago

Hi Julian!

For buttons there is no class "primary". There is a global setting

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

And color setting for button

$button-background: $primary-color;

If you want to change the button background, create a new variable ($custom-color: #ff0000;) and change rule on

$button-background: $custom-color;

Or simply list the color

$button-background: #ff0000;

Julian Meanchoff over 2 years ago

 

How come it's adding a class of primary? I've adjusted the styles in the global setting but on my stylesheet it still shows this black font when I want it to be white.

Rafi Benkual over 2 years ago

You do not need the class of primary for the default button style that uses the $primary-color variable. Try it without the class.

Val Ery over 2 years ago

Quote: "it still shows this black font when I want it to be white."

Font color - $button-color: $white;

Or - $button-color: #ffffff;