1

I want to implement a button with states - lightning:buttonStateful seems to be the right standard component for that.

The problem is - I want to put a few buttons - more than 5 and to have for each button a different color.

lightning:buttonStateful has the variant attribute which change colors, but it has only 3!

So I want to know is there a way to change the button colors?

I have tried to put a css class and change the background color, but the button has 2 different states - selected, unselected and hover, and I want to change all states.

component markup

<aura:attribute name="buttonstate" type="Boolean" default="false"/>
<lightning:buttonStateful
    labelWhenOff="Follow"
    labelWhenOn="Following"
    labelWhenHover="Unfollow"
    iconNameWhenOff="utility:add"
    iconNameWhenOn="utility:check"
    iconNameWhenHover="utility:close"
    variant="success"
    state="{! v.buttonstate }"
    onclick="{! c.handleClick }"
    class="ColorBlue"
/>

component css

.THIS .ColorBlue {
    background-color: rgb(0, 95, 178);
}
1
  • 1
    Depending on where your button is located, you may have meant .THIS.ColorBlue instead of .THIS .ColorBlue (note the space). As @Basti said, you may also need :active and :hover for a complete make-over.
    – sfdcfox
    Dec 5, 2017 at 10:02

1 Answer 1

2

You are looking for the :active and :hover css selectors I guess:

.THIS .ColorBlue,
.THIS .ColorBlue:active,
.THIS .ColorBlue:hover {
    background-color: rgb(0, 95, 178);
}

EDIT

This is the final answer that works great:

.THIS.ColorBlue,
.THIS.ColorBlue:active,
.THIS.ColorBlue:hover {
    background-color: rgb(0, 95, 178) !important;
}
2
  • 1
    Thanks Basti and @sfdcfox, your combined solution was almost perfect - eventually, I have also added !important to my css class because a transparency overrided by css background color, so Basti - I am editing your solution so it would be the right one Dec 5, 2017 at 14:31
  • sure, feel free, glad we could help :)
    – itsmebasti
    Dec 5, 2017 at 14:33

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .