Streaming live at 10am (PST)

Button shape won't become circular


#1

Hi everyone - anyone?

I’ve made some round buttons on my site, but have realised that it will work better if they are created as tabs. So I have styled my tabs exactly the same as my buttons, but for some reason when I go to make my buttons rounded (100% corner radius) the corner only curve a certain amount and don’t give me the same round look as the buttons did. Even when I change the radius to much higher percentages the shape doesn’t change.

If you have a look at my site you will see both sets of buttons on top of each other and you’ll be able to easily see the difference.

If anyone has any idea of how to fix it so my tabs look like buttons I would love to hear it.

Many thanks in advance!!!

Michelle


Here is my public share link: https://preview.webflow.com/preview/lindengraphics-website?preview=f06940e6cabee02f8c92d88a0d3dc7a1
(how to access public share link)


#2

I think the problem is that you are applying border radius’s in percentage, so you end up with ovals instead of circles.

If you change the border radius from 100% to 100px, the ovals become rectangles with rounded edges. If you want perfect circles you’ll have to give the same width and height to the buttons in fixed units, like px, or a variable unit not related to the aspect ratio, like em.

Hope that helps.


#3

The problem is that the buttons up top are 200 pixels wide by 200 pixels tall, like a circle. The tabs below are 90 pixels wide by 50 pixels tall, like an oval.

Set the tabs to have the same height and width, and you’ll have circles.


#4

Thank you both very much for the reply! You were right Excess, I had used % for the buttons and accidently used px for the tabs. I must have been tired. : )


#5

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