How to create a circle div where the clickable area is still square and the hover effect have reduce it's radius

Question

So I did was the snippet I've attached but the problem is when hovering on square area and not in the circle area or in the corner it's jittering. I need to somehow keep the square area as clickable. I'm wondering on how to approach this properly.

 .container { background-color: orange; width: 150px; height: 150px; } .container:hover { border-radius: 50%; background-color: red; }

 <div class="container"> </div>

enter image description here

Answer 1

You can use pseudo elements such as ::after or ::before .

Though they insert content at selected element, ::after inserts content after the selected element and ::before inserts content before the selected element.

content property generates the pseudo element. If you do not set that property, it will be content: none; by default and your pseudo element is not generated.

 .container { background-color: orange; width: 150px; height: 150px; } .container::after { content: ""; position: absolute; height: inherit; width: inherit; background-color: red; opacity: 0; transition: all .15s linear; } .container:hover::after { opacity: 1; border-radius: 50%; }

 <div class="container"> </div>

Answer 2

You can use a before pseudo element to be the background, so leaving the actual element untouched on hover.

The before pseudo element is given the same dimensions as the element but changes its background from orange to red on hover, and its radius changes to 50%.

To achieve the correct positioning and sizing of the before pseudo element you need to set the actual element to have a position, in this case the snippet sets it to relative, and the pseudo element is positioned absolute, behind the actual element:

 .container { width: 150px; height: 150px; position: relative; } .container::before { content: ''; background-color: orange; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; } .container:hover::before { border-radius: 50%; background-color: red; }

 <div class="container"> </div>