Button corner changes on hover

Fixed Bugs
1

Hi,

I’ve created a CTA button but the radius for ‘hover’ doesn’t seem to be working as it should.

I set the corner radius to 5px for both normal and hover, but when I hover the cursor over the button, the button changes from rounded to square corners. Any idea what’s going on?

WordPress version: 6.1.1
Cwicly: 1.2.9.3

2

Does this happen in the backend?
If so, I think this is some kind of Gutenberg behavior/limitation.

When hovering an element, it gets kind of highlighted and a blue border appears for visual indication purposes.
This border comes with a border-radius of 0 or so.

Related topic to the actual issue.

3

Hi, thanks, I saw that blue highlight/outline. It confused me for a bit. But it’s not that. It’s when I click outside the header, then hover over the button. Backend, yes.

4

How did you come to that conclusion?
Can you provide more info or a screencast?

I want to add that this outline is not an independent element, it’s an actual part of your block and it’s overriding the styles you set for your button.

In case it only happens inside the backend, I can’t imagine what else could be the issue, unless you applied some unusual custom rules.

5

Please find below a link to a screencast below:

6

Hello @RobS01,

As @Marius mentioned, when you select the block, the highlight effect (provided by Gutenberg) overrides the border styles you have provided on hover. This is a current limitation in the Site Editor that we are looking into.
The same thing will happen whenever you hover a block as the highlight styles take over.

Sorry for the inconvenience on this one.

7

Hi Louis,

Okay, thanks. I just saw the normal/hover/active dropdown above the editing window… I can preview it that way.

8

:+1:

Thank you for bringing it up here, as it makes working with border-radius more difficult when trying to figure things out.

Moving this to bugs so we can keep track of it (currently out of our hands if we stick to Gutenberg highlighting).

9

Yes, I also get this but it’s just one of Gutenberg’s…wonderful (ahem…) quirks/features.

I sometimes wonder how much hair Louis has ripped out of his head trying to make Cwicly play well with Gutenberg.

10

Hi everyone,

This issue seems to have been resolved by the Gutenberg team (although I’m unsure when the fix was released).

Moving to Fixed Bugs.

1 Like
11

This issue was addressed in Gutenberg v15.7 and was added to WP core with v6.3 :+1:

Thanks for the update @Araminta, I wasn’t aware of that.