CODEWITHSUNDEEP
angularangular-material
Albovsky
Albovsky

Reputation: 165

Angular Material ripple overflows on buttons in Safari

When I click on a button using Safari ripple effect overflows on rounded buttons. It works properly in Chrome.

I found out that Angular actually make a few more elements inside a button, I tried to change some parameters – didn't work at all.

enter image description here

Any way to fix this?

Pressed button

HTML

<button  mat-button type="submit" class="cta-button" [disabled]="!signupForm.valid" [(ngModel)]="disabled">
          <span >Zaloguj</span>
        </button>

CSS

.cta-button {
  display: block;
  cursor: pointer;
  text-align: center;
  vertical-align: middle;
  border: none;
  text-decoration: none;
  border-radius: 27px;
  font-size: 17.6px;
  font-weight: 400;
  color: white;
  background: -webkit-linear-gradient( 60deg, #1354DF 15%, #DB16AC);
  background: -o-linear-gradient( 60deg, #1354DF 15%, #DB16AC);
  background: linear-gradient( 30deg, #1354DF 15%, #DB16AC);

  width: 130px;
  margin: 0 auto;
  padding: 2px;
  box-shadow: 0px 5px 10px 0px rgba(42,53,170,0.2),
              0px 5px 10px 0px rgba(0,0,0,0.1);
  transition: .3s ease-in-out;
  -webkit-transform: translate(0, 0);
      transform: translate3d(0, 0, 0);
}

.cta-button:disabled  {
  background: lightgray;
  color: grey;
  box-shadow: 0px 5px 10px 0px rgba(42,53,170,0.0),
              0px 5px 10px 0px rgba(0,0,0,0.0);
  cursor:auto;
}

Upvotes: 2

Views: 1133

Answers (1)

denyoha
denyoha

Reputation: 183

You can use !important behind your css changes to overwrite the automatically generated stuff from Angular.

For example:

.cta-button:disabled  {
  background: lightgray !important;
  color: grey !important;
  box-shadow: 0px 5px 10px 0px rgba(42,53,170,0.0),
              0px 5px 10px 0px rgba(0,0,0,0.0) !important;
  cursor:auto !important;
}

Upvotes: 3

Related Questions