How do I change button color

ionic-v1
1

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>

with this styles

.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

:active state will not work on Android devices on non-anchor elements. Technically, it will work only on <a> elements.

Though you can make it work with a little cheat:

 <body ontouchstart="">

This will tell the android device to handle touch events and pseudo class :active will work correctly on all elements.

1 Like
3

Thanks. I will just style the <a> so it look like a button :slight_smile:

4

I’m glad to be of help :smile: