Angular Material 波纹溢出 Safari 中的按钮

Question

当我单击使用 Safari 波纹效果的按钮时，圆形按钮会溢出。它在 Chrome 中正常工作。

我发现 Angular 实际上在按钮中添加了一些元素，我尝试更改一些参数——根本不起作用。

有什么办法解决这个问题？

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;
}

Answer 1

您可以在您的 css 更改后面使用 !important 来覆盖从 Angular 自动生成的内容。

例如：

.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;
}