I’m sure this is an easy thing to do, but I can’t figure it out. lol I wanna resize a button element so that it’s a circle and is much smaller than i have it currently to. (I’m creating a custom vertical nav bar) I created a div named navDotContainer, in Display Settings set both its margins to AUTO and gave it a Height of 25%. (which is what i want it to be) I Then created a button and gave it a class of navDot and placed the element inside of the navDotContainer div I created and nothing happens. This method is how I size images…does it not work for button elements? You can see the first button on the left of my page under the cat head. Any help would be greatly appreciated.
I created a link block, and set the background colour to black. Changed the border curve to 100% radius which gives a perfect circle. You can then re-size much easier and add hover treatments etc.Just make sure the width and height are the same so it remains a perfect circle.
You’ll also be able to add any image or icon on top of it.
Hey @markos84uk, Thank you so much for your response. I originally thought to do this but was having difficulty creating it. My goal is to have the circle turn white when you hover over it. I was unable to get the images stacked on top of each other and stacked on top of each other vertically. This is what im trying to recreate:
If you scroll down you will see the side navbar appear. Would you have any suggestions on how to do this using .pngs…that is the stack sizing the circles for the navbar using images and stacking them?
Select the navbar.
Drag in a link block & give class.
Set background of link block to black.
Add border colour.
Add radius 100%
Change width and height of Link block to 60px each.
Add 7px padding to left of the link block.
To add white on hover:
Select hover.
Change background colour of link block to white. Go back to normal
Add transition “Background Colour” to 450ms.
Button is complete. Now you can copy and paste and arrange in the navbar. Hope this makes sense!
