CODEWITHSUNDEEP
htmlcssionic-frameworkionic2ionic3
Aditya
Aditya

Reputation: 2536

How to remove primary color when button clicked

When I click on the button the buttons color changes from #F74422 to primary color for some time. How to remove that primary color?

.click-button {
    background-color: #F74422;
}
<button ion-button class="click-button" full (tap)="clickme()">Click</button>

Upvotes: 1

Views: 2607

Answers (3)

pook developer
pook developer

Reputation: 346

Try this for ionic 4:

<ion-button class="my-button" expand="block" shape="round">TEXT</ion-button>

.my-button {
  --background: #4daf7c;
  --background-activated: #4daf7c;
}

Upvotes: 2

sebaferreras
sebaferreras

Reputation: 44669

As you can see in the Overriding Ionic Sass variables section from the docs, when you declare a button to be of a color, for example, primary behind the scenes Ionic will apply the following styles for an android button:

$button-md-background-color:           color($colors-md, primary)   
$button-md-background-color-activated: color-shade($button-md-background-color)
$button-md-background-color-hover:     $button-md-background-color

Something similar happens as well for ios buttons. That's why you see the primary color when you change the background-color using a css style rule. The activated and hover states of the button still use a color obtained from the primary color defined by Ionic.

The Ionic way of changing the button background color would be to add a new color in the variables.scss file:

$colors: (
  primary:    #488aff,
  secondary:  #32db64,
  danger:     #f53d3d,
  light:      #f4f4f4,
  dark:       #222222,
  newcolor:   #F74422 // <--- Here!
);

And then use that color in the button, using the color attribute:

<button ion-button color="newcolor">Secondary</button>

That way Ionic will create all the style rules to make the button to use that color for every state.

Upvotes: 2

RITESH ARORA
RITESH ARORA

Reputation: 497

its happen due to focus and visited You need to override 

.click-button:focus

and 

.click-button:visited

as well

Upvotes: 0

Related Questions