Smart button change hover and disabled stying?

[davout]

I am using a ‘smart-button’ and faIcons in my app toolbar..

<smart-button class="flat header-button" (onClick)="onAddTaskClick()" [disabled]="taskEditService.noAdd$ | async">
  <fa-icon size="2x" [icon]="iconAdd"  ></fa-icon>
</smart-button>

By default the

• buttons are displayed as white icons on a blue background
• When disabled the button is covered with a white mask
• When I hover over the button the button area changes to a white background

I am struggling to find out how to change the disabled and hover styles
What I would like is…

• Disabled – icon color changed to display as grey
• Hover – change the button border to show a thin white border

Any suggestions?
 
 
 

[davout]

Think I solved it, with…
 

smart-button button:hover {
  background-color: var(--smart-primary) !important;
  border: 1px white solid;
  color: white !important;
}
smart-button button:disabled {
  background-color: var(--smart-primary) !important;
  color: aliceblue !important;
}

[yavordashew]

Hi davout,
Yes, the solution you shared works good in your case.
Please, do not hesitate to contact us if you have any additional questions.
Best regards,
Yavor Dashev
Smart UI Team
https://www.htmlelements.com/

[Author]

Posts