Button Hover Caption Color

[mikromundo]

@Sherzod

Can you help me with this CSS ?

I want to change caption color to white on hover but when buttons are "big" do not work.

I tried searching for the correct classes but I couldn't identify them.

 

 

ProjectCssButton.rar

[Sherzod]

9 hours ago, mikromundo said:

Can you help me with this CSS ?

Hello,

I will try.

[Sherzod]

10 hours ago, mikromundo said:

I want to change caption color to white on hover but when buttons are "big" do not work.

One possible solution:

1. CustomCSS:

...

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

2. 

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

 

[mikromundo]

thanks for listening.

but, is there really no way to do this with just CSS?

[Sherzod]

Well, as you know, all this is css, in your case hover is applied to the caption...

[mikromundo]

Sorry... my question was about ONLY with css.

 

But thanks a lot. 

[Sherzod]

22 hours ago, mikromundo said:

Can you help me with this CSS ?

.ButtonOutline  { 
    padding: 0; 
    border: none;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    -webkit-transition: background 0.3s ease-in-out;
    transition: background 0.3s ease-in-out;
    cursor: pointer;
    border-radius: 0;
}
.ButtonRound {
    border-radius: .30em !important;
}

.ButtonOutlineBlue {
    background-color: white;
    border: 2px solid blue;
}
.ButtonOutlineBlue:focus {
    background:#042f6e !important;
    box-shadow: 2px 2px 5px #E0E0E0;
    text-decoration:none;
    border: 2px solid blue;
}
.ButtonOutlineBlue:hover {
    background:#042f6e !important;
    box-shadow: 2px 2px 5px #E0E0E0;
    text-decoration:none;
    border: 2px solid blue;
}
.ButtonOutlineBlue:active {
    background:#042f6e !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px solid gray !important;
}

.btn-font-blue .x-btn-inner { color: inherit; }
.btn-font-blue:hover { color: white; }
.btn-font-blue{ color: blue; }

 

[mikromundo]

Very very very good !!!

You are the ONE !

 

 

[Sherzod]

🙂

[Gustavo_GRSoft]

@Sherzod, can you add a css to change the background color when button is DOWN?

[Sherzod]

Hello,

@Gustavo_GRSoft

Additionally add this:

.ButtonOutlineBlue .x-btn-pressed {
    background:green !important;
    font-weight: bold;
    box-shadow: 2px 2px 5px #E0E0E0;
    border:2px solid gray !important;
}

 

[Gustavo_GRSoft]

@Sherzod, unfortunately it didn't work

[Sherzod]

1 minute ago, Gustavo_GRSoft said:

unfortunately it didn't work

You are sure? Seems works for me.

[Gustavo_GRSoft]

yes, everything works except pressed

this is the button class after DOWN

.x-btn.x-btn-menu-active.x-btn-default-large, .x-btn.x-btn-pressed.x-btn-default-large

[Sherzod]

On 6/15/2022 at 9:46 PM, Sherzod said:

-webkit-transition: background 0.3s ease-in-out;
transition: background 0.3s ease-in-out;

You may not be able to notice. Try changing the time (0.3s), or try long pressing.

[Gustavo_GRSoft]

i am using TUniSpeedButton with DOWN property enabled, when DOWN=True I want it to change the background color of the button.

[Sherzod]

3 minutes ago, Gustavo_GRSoft said:

i am using TUniSpeedButton with DOWN property enabled, when DOWN=True I want it to change the background color of the button.

I'll check. But I assume that you should use pressedCls config.

[Gustavo_GRSoft]

I did this but it still didn't work
 

function beforeInit(sender, config)
{
  config.cls="ButtonOutlineBlue";
  config.overCls = 'ButtonOutlineBlue'; 
  config.pressedCls = 'ButtonOutlineBlue';
}

[Gustavo_GRSoft]

hi @Sherzod, any progress?

[Sherzod]

On 6/17/2022 at 4:08 PM, Gustavo_GRSoft said:

i am using TUniSpeedButton with DOWN property enabled, when DOWN=True I want it to change the background color of the button.

Hello,

Which build of UniGUI are you using? Do you have a simple testcase to check?

[Gustavo_GRSoft]

1.90.0.1545

[Sherzod]

35 minutes ago, Gustavo_GRSoft said:

1.90.0.1545

Okay. Can you make a simple testcase to check?

[Gustavo_GRSoft]

23 minutes ago, Sherzod said:

Okay. Can you make a simple testcase to check?

of course

 

 

Project1.rar

[Sherzod]

On 6/18/2022 at 5:56 PM, Gustavo_GRSoft said:

Project1.rar 56.47 kB · 2 downloads

Hello,

Thanks for the testcase.

If you want the "down" state to always have a different background-color, need to look for another way.

[Gustavo_GRSoft]

3 minutes ago, Sherzod said:

Hello,

Thanks for the testcase.

If you want the "down" state to always have a different background-color, need to look for another way.

what would be the way?