Skip to main content
1-Visitor
November 22, 2019
Solved

Can i change the color of button, when pressed

  • November 22, 2019
  • 1 reply
  • 1298 views

Hey there, 

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

 

Best answer by RolandRaytchev

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

 

1 reply

21-Topaz I
November 22, 2019

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