Changing button font on MouseOver

[innocon]

Hi,

 

I like to change the font color of a button when I move my mouse over it.

To achieve this I changed the css:

 

.x-btn {

  background: white !important;

}

 

.x-btn-over {

  background: black !important;

}

 

But this doesn't work.

 

 

 

[rullomare]

Hi,

add in servermodule> CustomCss and try again

 

Best regards

[Sherzod]

Hi JRV.
 

.x-btn .x-btn-inner {
  color: white !important;
}
 
.x-btn-over .x-btn-inner {
  color: black !important;
}

Best regards...

[innocon]

Thanks duser! 

[plawan001]

Hello, is there a way to assign each button individually?

[Sherzod]

22 minutes ago, plawan001 said:

Hello, is there a way to assign each button individually?

Hello,

Yes. By adding LayoutConfig -> Cls...

[plawan001]

Do you have an example?

[Sherzod]

42 minutes ago, plawan001 said:

Do you have an example?

1. UniServerModule -> CustomCSS:

.customBtnOver .x-btn-inner {
  color: green;
  font-weight: bold;
}

2. 

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniButton1.JSInterface.JSConfig('overCls', ['customBtnOver']);

end;

 

[plawan001]

I've tried that, it turns bold. but does not change color 😥

[Sherzod]

1 minute ago, plawan001 said:

but does not change color

What color are you setting?

[Sherzod]

Have you tried using the method above?

[plawan001]

I set green according to the method you provided the sample

[irigsoft]

Where you want to change the color ?

On Form creation or on button click ?

here is javascript code in button click: uniSession.AddJS (document.getElementById("YOUBUTTON_jsID").style.color = "red";);

this change background: uniSession.AddJS (document.getElementById("YOUBUTTON_jsID").style.background = "green";);

[Sherzod]

4 minutes ago, plawan001 said:

I set green according to the method you provided the sample

 

46 minutes ago, Sherzod said:

.x-btn-inner

You may already using this class, where possible already used !important

[Sherzod]

Can you test this with a simple app?

[plawan001]

Can a button change the font color when the mouse is hovered over the button?

[Sherzod]

1 hour ago, plawan001 said:

Can a button change the font color when the mouse is hovered over the button?

Please make a simple testcase, not a video.

[plawan001]

Test.zip

[Sherzod]

Ok, thanks. I will check.

[Sherzod]

2 hours ago, plawan001 said:

Test.zip 6.88 MB · 1 download

1. 

.button1 {
  background:white !important;
  border: 2px solid #4CAF50;
}

.button1:hover {
  background:#4CAF50 !important;
  border: 2px solid #4CAF50; 
  color: white !important;
  transition-duration: 0.5s;
}

.customHover .x-btn-inner {
  color: white !important;
  transition-duration: 0.5s;
}

2. 

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniButton1.JSInterface.JSConfig('overCls', ['customHover'])
end;

 

[plawan001]

I did and it still doesn't work.
The font still doesn't change color when mouse over the button.

[Sherzod]

Sorry,

Does the color change?

[Sherzod]

8 minutes ago, plawan001 said:

I did and it still doesn't work.
The font still doesn't change color when mouse over the button.

1. Modified CSS:

.button1 {
  background:white !important;
  border: 2px solid #4CAF50;
}

.button1:hover {
  background:#4CAF50 !important;
  border: 2px solid #4CAF50; 
  color: white !important;
  transition-duration: 0.5s;
}

.customHover .x-btn-inner {
  color: white !important;
  font: italic small-caps bold 12px/30px Georgia, serif;
  transition-duration: 0.5s;
}

2. Do not forget

procedure TMainForm.UniFormCreate(Sender: TObject);
begin
  UniButton1.JSInterface.JSConfig('overCls', ['customHover'])
end;

3. Result:

[plawan001]

Thank you very much, it works😄

[plawan001]

Hello, would like to ask more Is there a way to change the fort color when selecting a menu?