How can I apply CSS in Lightning Buttons to change color

Question

I have applied css to my lightning Button to change the color of it. And I have class named Morning inside my button

.THIS.Morning{
    //Mornig is class inside my button
    color: red;
    }

Answer 1

You might be good with the normal button variant, have you tried it? <lightning:button variant="destructive-text"/> https://developer.salesforce.com/docs/component-library/bundle/lightning:button/example

You can use normal <button> and style it with Salesforce-defined classes + whatever else you need. Use Lightning Design System: https://www.lightningdesignsystem.com/components/buttons/

If it absolutely has to be a <lightning:button> and variant's aren't enough - look into button "styling hooks". More info:

• https://www.lightningdesignsystem.com/platforms/lightning/styling-hooks/
• https://developer.salesforce.com/docs/atlas.en-us.lightning.meta/lightning/tokens_standard.htm

Answer 2

Please try this in your CSS :

.THIS .slds-button_brand {
    color:red;
}