Gradient button issue


I want an awareness button on the menu.
I have defined a class.
For example: gradient_btn
Defined same gradient background for normal, hover and active status.
But that doesn’t work well. Except in Safari.
Not good in the following browsers: Chrome, Firefox, Opera, Brave.
As soon as I click, the defined gradient is not displayed.
Did I do it wrong or is it a bug? (32.2 KB)

@Ben I’ve downloaded your test button page and it is working just fine for me in Safari and Chrome. I don’t have any other browsers installed so can’t try in any others. In both of my browsers the gradient remains on mouseover - only the text changes colour. The only thing I can think of is that if you were testing it in browsers before you actually got it right, it could be that the browsers are rendering a cached version of your page. I suggest you upload it to a server and check it online, or clear your local caches before viewing again.

1 Like

@hendon52 Thank you for the feedback.
Still doesn’t appear well in other browsers. Except Safari.
[My Chrome version 79.0.3945.88 (Official Build) (64-bit)]

This is not my first gradient button. This is definitely not a cache problem.
Would you give me a try?
Here is my TEST page.

Please use Firefox or Chrome.
Please click the “Hire Me” button and move the mouse very slightly sideways.
Don’t click again and don’t place the mouse pointer over the button.

What you see?
I have a gray button with a light blue border. Such is not defined. :frowning:
I see the same thing with other desktop browsers. (Except Safari.)

I look forward to your feedback.

Blocs version 3.4.2
High Sierra 10.13.6

@Ben, yes, I see the issue in Chrome. I don’t know why it does that, so may be best to file a bug report. I did try it on my system by just setting the normal and hover states - didn’t make any changes to the active state. The button worked as expected. The light blue outline appears to be a default for any button that is clicked - I guess it’s to show visitors that the click has registered.

Google Chrome forces this on us. It’s supposed to help with usability on mobile devices.

Just google it:
“ugly chrome button style”

@hendon52 Thanks.

I guess it’s to show visitors that the click has registered.

But then why can’t I control the colors?
Light blue and grey. Pfff.

@Norm Please share your thoughts.

Not just the ugly button is my problem.
Unregulated colors in almost all browsers. (Except Safari. But who used Safari browser?)

Me :rofl: , not a fan of chrome. I only use the others for testing.

Anyway this is worth reading. You can kill it with CSS, but then you affect accessibility.

Me :rofl: , not a fan of chrome.

I’ve heard of someone using Windows. Maybe they are more. :slight_smile:

Thanks for the link, I’ll check it out.