cancel
Showing results for 
Search instead for 
Did you mean: 
cancel
Showing results for 
Search instead for 
Did you mean: 

Community Tip - Help us improve the PTC Community by taking this short Community Survey! X

Can i change the color of button, when pressed

Ushin
7-Bedrock

Can i change the color of button, when pressed

Hey there, 

I am trying to change the color of when when it is pressed but unfortunately am unable to do it till now. 

 

1 ACCEPTED SOLUTION

Accepted Solutions

Hi @Ushin 

one possible way to do this is to define different classes for the button apperance and on click (or other) event perform some code  like this:

angular.element(document.querySelector("[widget-id=button-6] button")).removeClass("playbutton").
addClass("pause-button");

 

 It means that you will remove the paybutton class and replace it by pause-button class. The class defintion should be done in  the STYLES > Applicaiton e.g.

.playbutton {
    color: MediumSeaGreen; 
    background-color: rgba(250,200,0,0.25);
     border: 4px inset MediumSeaGreen;
    padding: 0px 0px;
    text-align: center;
    text-shadow: 1px 1px  MediumSeaGreen;
    display: inline-block;
    font-size: 20px;
}
.pause-button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

 

View solution in original post

1 REPLY 1

Hi @Ushin 

one possible way to do this is to define different classes for the button apperance and on click (or other) event perform some code  like this:

angular.element(document.querySelector("[widget-id=button-6] button")).removeClass("playbutton").
addClass("pause-button");

 

 It means that you will remove the paybutton class and replace it by pause-button class. The class defintion should be done in  the STYLES > Applicaiton e.g.

.playbutton {
    color: MediumSeaGreen; 
    background-color: rgba(250,200,0,0.25);
     border: 4px inset MediumSeaGreen;
    padding: 0px 0px;
    text-align: center;
    text-shadow: 1px 1px  MediumSeaGreen;
    display: inline-block;
    font-size: 20px;
}
.pause-button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
}

 

Top Tags