I'm having a lightning button called "Submit". I have added css property to that button to display it in red color. When I click on that button, I want to change my cursor pointer style to 'not-allowed'. But it didn't work out for me. Below is the code.


<lightning:button aura:id = "btnId" class="buttonColor" label="Submit" onclick="{!c.submitClass}">


submitClass: function(component,event,helper){
    var submitBtn = component.find('btnId');


.THIS .notAllowedCursor {
  cursor: not-allowed !important;
  background: none !important;
.THIS .buttonColor{
  padding-left: 1rem;
  padding-right: 1rem;
  text-align: center;
  vertical-align: middle;
  border: 1px solid rgb(196, 13, 13);
  transition: border .15s linear;
  background-color: rgb(196, 13, 13);
  color: white;
  • is button your first element in the component?
    – User6670
    Apr 9, 2020 at 12:37
  • Have you tried changing it to a hover rule instead? Also, if SF is adding CSS classes, if it also has a "cursor: ... !important" and it's declared later, it would always take precedence: css-tricks.com/little-css-stuff-newcomers-get-confused-about/… (it's at the bottom, their anchor doesn't work) Apr 9, 2020 at 12:37
  • If you're trying to prevent double clicks, you should really disable it instead. Which would be via a Boolean Attribute instead of CSS
    – stackasaur
    Apr 9, 2020 at 13:20
  • Yes !!! I used disabled option as stackasaur suggested. It worked. Thanks !!!
    – sfdcOwl
    Apr 10, 2020 at 7:12

1 Answer 1


Inside the click method of the button add disabled="true" attribute to the button element

You must log in to answer this question.

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