如何在 Ionic Framework 中更改按钮颜色答案

【问题标题】：How do I change button color in Ionic Framework如何在 Ionic Framework 中更改按钮颜色
【发布时间】：2015-08-10 11:48:20
【问题描述】：

如何在单击按钮时更改按钮颜色？我尝试了 :active 样式，但它在 android 设备上不起作用（但它在浏览器中起作用）。

例如我有一个这样的按钮

<button class="button button-full button-calm button-login" type="submit">Sign In</button>

还有这样的样式

.login .button-login {
  width:96%;
  background: red;
  margin: 0 auto;
  border: 0;
  border-radius: 4px;
  moz-border-radius: 4px;
  webkit-border-radius: 4px;    
  transition: all 0.3s ease 0s;
}

.login .button-login:active {
  background: yellow;
}

我希望按钮在我触摸时变为黄色，并在用户抬起手指时变为红色。

【问题讨论】：

标签： android html css ionic

【解决方案1】：

我认为，用精心设计的 <a> 替换 <button> 是个好主意。

例如这样。

#button {
    background-color: #E3E1B8; 
    padding: 2px 4px;
    font: 13px sans-serif;
    text-decoration: none;
    border: 1px solid #000;
    border-color: #aaa #444 #444 #aaa;
    color: #000
}

#button:hover { background-color: #46000D; }

&lt;a href="#" id="button"&gt;New Element&lt;/a&gt;

【讨论】：

@AnhTuan 将您的按钮设置为离子会更难，但我希望它会起作用！

【解决方案2】：

        I have done it using Ionic Way what he has done in own css.

 <button id="login2-button9" class="button button-gold">English</button>

将此添加到您的 css 文件中

      .button.button-gold {
            border-color: transparent;
            background-color: #625031;
            color: #000000; }
            .button.button-gold:hover {
              color: #000000;
              text-decoration: none; }
            .button.button-gold.active, .button.button-gold.activated {
              background-color:#c0a062; }
            .button.button-gold.button-clear {
              border-color: transparent;
              background: none;
              box-shadow: none;
              color: #625031; }
            .button.button-gold.button-icon {
              border-color: transparent;
              background: none; }
            .button.button-gold.button-outline {
              border-color: #625031;
              background: transparent;
              color: #625031; }
              .button.button-gold.button-outline.active, .button.button-gold.button-outline.activated {
                background-color: #625031;
                box-shadow: none;
                color: #000000; }

【讨论】：