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?
@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.
@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.
I see the same thing with other desktop browsers. (Except Safari.)
@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.