Community Tip - Did you get an answer that solved your problem? Please mark it as an Accepted Solution so others with the same problem can find the answer easily. X
Hey there,
I am trying to change the color of when when it is pressed but unfortunately am unable to do it till now.
Solved! Go to Solution.
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;
}
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;
}