How do I change button color in Ionic Framework

15,750

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>
Share:
15,750
Admin
Author by

Admin

Updated on July 27, 2022

Comments

  • Admin
    Admin over 1 year

    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.