Why are circular buttons in software/websites so rarely used? Is it purely convention or are there usability reasons behind this?

  • The new metro(modern) style of Windows uses a lot of circular buttons with icon inside. Commented Feb 4, 2013 at 4:36
  • This very page has at least 2 of them (the star and the checkmark). Commented Feb 4, 2013 at 8:38

5 Answers 5


Circular buttons can work well when an icon is all that's needed inside. A good example of this is Path. Their single icon buttons are circular and work well. However, to fit a word in the button, like 'Register', the button would have to be as tall as it is wide, taking up a lot of valuable space and creating a huge button. If using completely circular buttons throughout an entire interface, all buttons would have to be as large as the longest word(s) within a single button. IE, a button for the word 'Add' would have to be the same size as the button for 'Register', for continuity in sizing throughout the interface. This would be a huge waste of space.

Lots of apps like Path and sites like Svbtle get around this by using circular buttons for icons, then keeping the same height button and elongating it horizontally to create a rectangle with rounded corners for buttons with text.

I guess the disadvantage in terms of usability is that a circle or a rectangle with circular rounded corners has a smaller click area than a rectangle with smaller or no rounded corners. So, there's a slightly increased chance of users missing the button completely. However, this is more of a style choice I think.

  • 1
    Even if you can use small circular buttons with just icons, they likely won't be quite as space-efficient as rectangular ones. A lot of the icons you'll end up using will have rectangular-ish bounding boxes, so when you enclose that in a circle, then pad the circles out to rectangles in order to fit them into a layout (think square inside circle in side square), you'll waste more space than with rectangles (think square inside square inside square).
    – Cascabel
    Commented Feb 3, 2013 at 20:51
  • @Jefromi: Not necessarily. If the icons are designed to be circular, the unused space in the rectangular bounding box can be made transparent or programmatically trimmed away.
    – Kevin
    Commented Feb 4, 2013 at 3:41
  • @Kevin: I know some icons are or can be made circular, but you can't always just design new icons to suit your design. If there are established symbols for things, new ones just confuse people.
    – Cascabel
    Commented Feb 4, 2013 at 3:45

The answer is largely historical. In early HTML, there were no native circles or even squares with rounded corners, and the only way that you could have them was to use images. And at a time when speed mattered a lot (think 2000+ times slower than a connection today), most websites avoided images as much as possible.

So, if you wanted to make a button, you used a rectangle. I suppose it stuck as people became used to buttons being rectangles. There are many situations where a rectangular button is a better choice than a square one, but not so many to justify the rarity of a circular button.

When you look at physical interfaces, however, you will see that circular buttons are very popular. They are in general easier to make, cheaper, and arguably more aesthetically pleasing. I think if you watch interfaces over the next few years, you will see a marked increase in the use of round or non-rectangular buttons.

  • 6
    IF you're arguing historical reasons you should be pointing out their lack in early versions of Windows, MacOS, and various Unix desktop environments that first made GUIs mainstream. Commented Feb 4, 2013 at 1:31
  • 3
    Indeed... and one reason they weren't used on many of those desktops is that the display technology was too lo-res and with too few bitplanes to render visually pleasing circles. Another is that a circle was relatively slow and mathematically complicated to draw at an arbitrary size, whereas rectangles could either be drawn with straight lines, or composed from pre-rendered bitmaps (one for each corner, and one each for top, bottom, left and right segment).
    – calum_b
    Commented Feb 4, 2013 at 9:48
  • 2
    Was also tempted to give a -1 for the all-too-common supposition that the the web is the be-all and end-all of GUI design, but I'll let it slide this time :)
    – calum_b
    Commented Feb 4, 2013 at 10:17
  • @scottishwildcat, Agreed. I was referring to web more than desktop applications. There are other reasons why they aren't used much in desktop applications beyond what you have stated.
    – JohnGB
    Commented Feb 4, 2013 at 14:48
  • 2
    @JohnGB I think the "OK" whatever-you-want-to-call-it in the first screenshot in the second link qualifies as a button. Or look at the fourth screenshot from the top at that same link. I'd think those qualify as buttons.
    – user
    Commented Feb 4, 2013 at 15:26

Considder how you're going to place multiple round icons:


download bmml source – Wireframes created with Balsamiq Mockups

In the first solution, you're basically still using a rectangular grid, and you're effectively wasting the space around the icons. However, with circular icons you could go for a hexagonal grid like in the bottom solution. That would allow placing the icons closer together than in a rectangular grid, but I doubt it will score well on scanability.


I think that it also about fitting circles into a grid. Web pages and interfaces are mostly based on grid systems and look like blocks. So the circular buttons will look weird with blocks of text surrounding them.

  • Valid point. Even if aligning circles in a grid, the though process still has mostly been "rectangular". Also has to do with what @JohnGB pointed out in his answer, I suppose.
    – kontur
    Commented Feb 6, 2013 at 8:35

Its also worth noting that from a design POV its easier to fix text into a rectangular button than a circular one, especially if localisation is involved.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.