CODEWITHSUNDEEP
htmlcssangularangular-material
Thomas Reichmann
Thomas Reichmann

Reputation: 467

how to change mat-button background color and maintain the color fade

I'm trying to change the background color of a angular material mat-button, as can be seen in this stackblitz example using background-color: red; on hover only works for the mat-raised-button and when applied to the mat-button it removes the fade-in of the background color.

How can I change the background color while still keeping the fade animation?

Upvotes: 0

Views: 1227

Answers (2)

Kavinda Senarathne
Kavinda Senarathne

Reputation: 2014

The button styles are encapsulated, so you have to use /deep/ selector to change internal styles.

Try this:

.link-btn /deep/ .mat-button-focus-overlay {
    background-color:transparent;
}

Upvotes: 1

Mathieu Seiler
Mathieu Seiler

Reputation: 747

I don't know if angular material provides a configuration to allow mat-button to have color shade transition. However you can do it easily with one css line:

[mat-button] {
  transition: background 0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
    box-shadow 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

Here is the stackblitz updated: https://stackblitz.com/edit/angular-xf75rm-77tuxf?file=src/app/button-types-example.scss

Upvotes: 1

Related Questions