如何更改Ionic Framework中的按钮颜色 [英] How do I change button color in Ionic Framework

问题描述

点击时如何更改按钮颜色？我尝试过：active风格，但它不适用于android设备（但它在浏览器中工作）。

例如，我有一个这样的按钮

 < button class =button button-full button-calm button-logintype =submit> Sign In< /按钮> 
  

以及这样的风格

  .login .button-login {
 width：96％; 
背景：红色; 
 margin：0 auto; 
 border：0; 
 border-radius：4px; 
 moz-border-radius：4px; 
 webkit-border-radius：4px; 
过渡：全部0.3s缓解0s; 
} 
 
 .login .button-login：active {
 background：yellow; 
} 
  

我希望按钮变成黄色，当我触摸它时变红，用户抬起手指。

解决方案

我想，好主意将会取代<按钮> 与精心设计的< a> 。

例如像这样。

< padding：2px 4px; font：13px sans-serif;文字修饰：无; border：1px solid＃000; border-color：#aaa＃444＃444 #aaa;颜色：＃000} #button：hover {background-color：＃46000D; }

< a href =＃id =按钮>新元素< / a>

How can I change button color when it is clicked? I tried the :active style but it don't work on the android device (however it does work in the browser).

For example I have a button like this

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

and styles like this

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

I expect the button to become yellow when I touch it and become red back when the user lift the finger.

解决方案

I think, nice idea will be to replace <button> with a carefully styled <a>.

For example like this.

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

<a href="#" id="button">New Element</a>

这篇关于如何更改Ionic Framework中的按钮颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！