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).
如何在单击时更改按钮颜色?我尝试了:主动样式,但它在Android设备上不起作用(但它确实在浏览器中工作)。
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.
我希望按钮在我触摸时变黄,当用户抬起手指时变成红色。
2 个解决方案
#1
2
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>
#2
0
I have done it using Ionic Way what he has done in own css.
<button id="login2-button9" class="button button-gold">English</button>
Add this in your css file
在你的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; }
#1
2
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>
#2
0
I have done it using Ionic Way what he has done in own css.
<button id="login2-button9" class="button button-gold">English</button>
Add this in your css file
在你的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; }