Change Button color when it is pressed


#1

How do i do it ? I tried
.myButton:highlighting{
background-color:#00A3FF;
}
it didnt work


#2

@heneliezer the pseudo selector is :highlighted

.myButton:highlighted{
    background-color:#00A3FF;
}

#3

This does change the color when I click , but it turns back once i remove my finger. I want the color to change permanently , like a flag. what do I need to do


#4

If you are using angular you could bind a class to a buttonClicked variable. Something like:

buttonClicked: boolean = false;

[class.button-clicked]="buttonClicked" (tap)="buttonClicked = true"

.button-clicked {
   background-color:#00A3FF;
}

#5

@jeffswitzer Instead of a button I hav a Label. So how can I make that highlight ? the code above seems to work only on buttons.


#6

As far as I can remember, pseudo classes (or most of them) seem to work only with <Button></Button>


#7

I wasn’t using the highlighted pseudoclass; you shouldn’t need it as long as the goal is just to to change the background color of the tapped element. Maybe I’m missing something because I usually use styled FlexboxLayouts in lieu of buttons, but it seems to work for me.