Search code examples
cssmaterial-designrounded-corners

Googles new buttons - how to do rounded ends in CSS

you may have noticed that Google are changing their design ethic a little, and giving things "rounded ends". Have a look at this pic to see what I mean:

Google drive has rounded corners and rounded ends

Love it or hate it, lots of people will follow trend. So what is the best way to do rounded ends to a button in CSS? Round / circular buttons are done with 

-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;

Rounded corners are done with : 

-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;

But how to apply a 50% rounded corner to a multiline button of any width, as per the google site?

I have done it with a large pixel value in this codepen https://codepen.io/anon/pen/yjdRXB But what if the content is very large? Or does Google only plan to use this style on single-line text? I want to replace the 500px value in my pen with a value which works for any font size and any menu item.

Any thoughts on this are appreciated. Thanks!

Solution

  • I think you're in the right track, just set it as larger as it makes you safe thinking about maximum height of button/item/div/whatever. I've checked Google Drive button by inspecting it, its border-radius is set to be 66px.

    Notice that I've set the 4 corners in the same border-radius property, 2 of them being 0 just like the example. The border-radius are defined in the following order: top-left, top-right, bottom-right, bottom-left.

    .button {
  padding: 10px 30px;
  background: red;
  border: none;
  border-radius: 0 100px 100px 0;
}
  
    <button class="button">Hello world</button>