Menu icon Foundation
Foundation overrides my button's bg color

I added a new class called cancel for our cancel button since I can't find the appropriate button class to use.

In _settings.scss, I added these

$cancel-button-bg-color: $charcoal;
$cancel-button-bg-hover: lighten($cancel-button-bg-color, 20%);

In _buttons.scss, I added these

.cancel {
background: $cancel-button-bg-color;
&:hover {
background: $cancel-button-bg-hover;
}
}

In my html

< a href="#" class="button cancel uppercase">cancel< /a>

The color I assigned to the cancel button is #555555 or $charcoal. The cancel button's background color gets displayed properly. The hover background color is being displayed fine too.

Now for the problem. When I add the "disabled" class to the cancel button, the background color that gets applied is $primary-color with opacity. I still would like to have a background color of $charcoal but a little lighter like opacity of 50%.

Another problem I see is that when I click on the Cancel button, the button's background changes to the $primary-color.

I'm not sure if I'm doing the right approach. I tried using the $secondary-color but was wondering why it's not changing the background of my button with a secondary class assigned to it.

button

I added a new class called cancel for our cancel button since I can't find the appropriate button class to use.

In _settings.scss, I added these

$cancel-button-bg-color: $charcoal;
$cancel-button-bg-hover: lighten($cancel-button-bg-color, 20%);

In _buttons.scss, I added these

.cancel {
background: $cancel-button-bg-color;
&:hover {
background: $cancel-button-bg-hover;
}
}

In my html

< a href="#" class="button cancel uppercase">cancel< /a>

The color I assigned to the cancel button is #555555 or $charcoal. The cancel button's background color gets displayed properly. The hover background color is being displayed fine too.

Now for the problem. When I add the "disabled" class to the cancel button, the background color that gets applied is $primary-color with opacity. I still would like to have a background color of $charcoal but a little lighter like opacity of 50%.

Another problem I see is that when I click on the Cancel button, the button's background changes to the $primary-color.

I'm not sure if I'm doing the right approach. I tried using the $secondary-color but was wondering why it's not changing the background of my button with a secondary class assigned to it.

FoundationDeck over 4 years ago

I think you need to add the focus Pseudo-class to the the anchor tag.

a:focus
{
background-color: assign color you want
}

Onie Camara over 4 years ago

Ok, I'll try it later. I'll keep you posted. Thanks.

Rafi Benkual over 4 years ago

Along those lines, a disabled button has a specific color.

So you can add to your custom button like:

.cancel.button {
  opacity: 0.7;
}

Onie Camara over 4 years ago

Thanks folks!