Googles новые кнопки - как сделать закругленные концы в CSS - PullRequest
Новая
       65

Googles новые кнопки - как сделать закругленные концы в CSS

0 голосов
/ 25 мая 2018

вы, возможно, заметили, что Google немного меняет свою дизайнерскую этику и дает вещам "закругленные концы".Посмотрите на эту фотографию, чтобы понять, что я имею в виду:

Google drive has rounded corners and rounded ends

Нравится это или нет, многие люди будут следовать тренду.Так как же лучше всего сделать закругленные концы для кнопки в CSS?Круглые / круглые кнопки выполняются с помощью 

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

Закругленные углы выполняются с помощью: 

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

Но как применить округленный на 50% угол к многострочной кнопке любой ширины в соответствии ссайт Google?

Я сделал это с большим значением пикселя в этом коде https://codepen.io/anon/pen/yjdRXB Но что, если содержимое очень большое?Или Google планирует использовать этот стиль только для однострочного текста?Я хочу заменить значение 500px в своем пене значением, которое подходит для любого размера шрифта и любого пункта меню.

Любые мысли по этому поводу приветствуются.Спасибо!

1 Ответ

0 голосов
/ 25 мая 2018

Я думаю, что вы на правильном пути, просто установите его на большее, так как это поможет вам безопасно думать о максимальной высоте кнопки / элемента / div / что угодно.Я проверил кнопку Google Диска, проверив ее, ее радиус границы установлен равным 66px.

Обратите внимание, что я установил 4 угла в одном и том же свойстве border-radius, 2 из которых равны 0 простокак в примере.Границы-радиус определяются в следующем порядке: верхний левый, верхний правый, нижний правый, нижний левый. 

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