单击按钮时如何删除原色

Question

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

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

<button ion-button class="click-button" full (tap)="clickme()">Click</button>

Answer 1

它的发生是由于关注和访问您需要覆盖

.click-button:focus

和

.click-button:visited

还有

Answer 2

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

$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 颜色中获得的颜色。

更改按钮背景颜色的 Ionic 方式 是在 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 将创建所有样式规则以使按钮为每个状态使用该颜色。

Answer 3

对离子 4 试试这个：

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

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

单击按钮时如何删除原色

How to remove primary color when button clicked

html

css

ionic-framework

ionic2

ionic3