Changing shape on hover

[sessionone]

Hi all,

Is it possible to change one shape into another on hover? I’m trying to convert a circle into a square, but can’t seem to find a way to do this through interactions.

All advice is much appreciated.

Thanks.

sessionone

---

Here is my public share link: LINK
(how to access public share link)

[aaronocampo]

I made an easy example here:

https://preview.webflow.com/preview/circle-into-square?preview=ba4174cf896e827c7c38e4c1a59281f0

Check it out and let me know if that helps

Cheers,

[sessionone]

Thanks!!!

Still trying to figure out what you did there, but this is what I was looking for!

Thanks again.

sessionone.

[Daniel_Schultheiss]

A circle is defined by the border-radius. Therefore you have one css property to control the form of the desired element.

E.g. if you want a circle, made the br 50%. Set it to 0 to have a perfect square.

Now all you need is a transition - because if you dont have one - you ll not be able to see the transformation. Its too fast.

Then you goto “hover” and defined e.g. another border-radius for the hover-state.

Voila, your circle transforms into a regular shape.

Regards
Daniel

[sessionone]

Thanks!!!

I did have an idea that it has something to do with the border radius, but did not know where to change it on hover.

Thanks again!

sessionone