After Modal - button loses default settings

I’m so close to having the site completed.

I’m now noticing that the button I am using to launch the Modal, resets to a different design and size after the Modal window closes. I have triple checked the Class settings I have for the button, and for the Normal/Hover/Active states, they are all the same. Yet I keep seeing this default design of a grey button that I didn’t create. The button also has a rollover state that show my design underneath. Once I return to the non-preview mode, the button returns to the design as I had intended.

Any ideas?

I’ve also noticed this issue, but I’m not sure if it’s a deliberate feature or a bug. In my case, the client was happy to have the button change to a default translucent grey when closing a model because it indicates to the site visitor that they have already opened the model - a sort of “visited” state. If they hover over the button again, it does show the original button colour again.

It may be worth firing off a note to support to see if it is a bug or not.

Thats likely focus, which is to do with accessibility. You can “fix” it with CSS, or even code. But it will effect accessibility. eg. people who can only use keyboards etc will have problems navigating your page.

.myBtn:focus {
 outline: none;

Same method as @Malachiman, but I am actually using the Class Editor to do this.

What I do:

If my button class is .button, I create another class in class manager named .button:focus, then open this class, set the background color to what I want and get rid of shadow in the shadow tab. All for normal state.

P.S. Didn’t know it affects the accessibility though. Maybe leaving the shadow intact will be the solution for both?

1 Like

There are some scripts online you can find that will check if a mouse is being used, then disable focus, and if only a keyboard will enable focus. Which is probably the best solution.