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