Streaming live at 10am (PST)

Changing shape on hover

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.



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

I made an easy example here:

Check it out and let me know if that helps


1 Like


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

Thanks again.


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.




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!


This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.