Jump to content

Changing button font on MouseOver


innocon

Recommended Posts

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.
 
 

 

Link to comment
Share on other sites

  • 8 years later...
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;

 

image.png.18d64c51e1b7f908127ac07c49fbc787.png

Link to comment
Share on other sites

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";);

Link to comment
Share on other sites

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;

 

Link to comment
Share on other sites

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:

BtnHover.gif.5fc458f69d2c442b386b98b2d1d1938b.gif

  • Like 1
Link to comment
Share on other sites

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now
×
×
  • Create New...