单击按钮时如何删除原色答案

【问题标题】：How to remove primary color when button clicked单击按钮时如何删除原色
【发布时间】：2018-09-11 13:31:50
【问题描述】：

当我单击button 时，按钮颜色会在一段时间内从#F74422 变为原色。如何去除原色？

.click-button {
    background-color: #F74422;
}

&lt;button ion-button class="click-button" full (tap)="clickme()"&gt;Click&lt;/button&gt;

【问题讨论】：

我试了 100 次。它没有改变。所以我们需要知道some time。可能和你使用的框架有关。
@SureshPonnukalai 上面的片段只适用于离子框架

标签： html css ionic-framework ionic2 ionic3

【解决方案1】：

对离子 4 试试这个：

<ion-button class="my-button" expand="block" shape="round">TEXT</ion-button>

.my-button {
  --background: #4daf7c;
  --background-activated: #4daf7c;
}

【讨论】：

【解决方案2】：

正如您在文档的 Overriding Ionic Sass variables 部分中看到的那样，当您声明按钮为颜色时，例如，primary 在幕后 Ionic 将应用以下样式对于安卓按钮：

$button-md-background-color:           color($colors-md, primary)   
$button-md-background-color-activated: color-shade($button-md-background-color)
$button-md-background-color-hover:     $button-md-background-color

ios 按钮也会发生类似的情况。这就是为什么当您使用 css 样式规则更改 background-color 时会看到原色。按钮的activated 和hover 状态仍然使用从Ionic 定义的primary 颜色获得的颜色。

更改按钮背景颜色的离子方式是在variables.scss 文件中添加新颜色：

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222222,
  newcolor:   #F74422 // <--- Here!
);

然后在按钮中使用该颜色，使用color 属性：

<button ion-button color="newcolor">Secondary</button>

这样，Ionic 将创建所有样式规则以使按钮为每个状态使用该颜色。

【讨论】：

【解决方案3】：

它的发生是由于焦点和访问你需要重写

.click-button:focus

和

.click-button:visited

还有

【讨论】：