Skip to content Skip to sidebar Skip to footer

How Do I Change Button Color In Ionic Framework

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 butt

Solution 1:

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

For example like this.

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

#button:hover { background-color: #46000D; }
<ahref="#"id="button">New Element</a>

Solution 2:

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

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

Add this in your css file

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

Post a Comment for "How Do I Change Button Color In Ionic Framework"