От автора: хотя плоские, минимальные интерфейсы были в моде в течение большей части десятилетия, чисто прямоугольные кнопки не так распространены, как вы думаете. Такие дизайнеры, как я, часто «закругляют» углы, которые могут сделать интерактивный элемент менее привлекательным для клика.
Иногда мы округляем их чуть-чуть, смягчая очертание, но не теряя прямоугольника. Но в других случаях мы увеличиваем эти радиусы до тех пор, пока не сойдутся углы, образуя полукруг на каждом конце… форму «таблетки». Элементы в форме таблеток имеют дополнительное преимущество, заключающееся в плавном сворачивании в круг там, где есть недостаток пространства и доступна иконография.
В CSS мы создаем этот вид, устанавливая для элемента border-radius. Чем больше значение, тем больше скруглены углы. Просто, правда?
Не всегда!
Проблема 1: Размер целевого элемента при нажатии / клике
Легко забыть, что border-radius это не чисто визуальное изменение … эти потерянные угловые пиксели больше не кликабельны! Для меньших значений border-radius или более широких кнопок эта потеря в размере касания может быть незначительной. Но идеально круглая кнопка потеряет более 20% площади интерактивной поверхности в закругленных углах!
Проблема 2: Обрезка содержимого в IE11 и Safari
В дополнение к уменьшению площади интерактивной поверхности элемента Internet Explorer 11 также действует так, как будто для свойства overflow элемента button установлено значение hidden. Это может вызвать непреднамеренное обрезание наложенных элементов, таких как иконки уведомлений.
Подобная проблема также может возникать в Safari, но только для дочерних элементов с position отличным от relative или absolute.
Решение проблем
Мы можем решить эти проблемы, изменив макет несколькими способами. Сначала мы введем «внутренний» элемент, который представляет визуальную форму таблетки без уменьшения площади поверхности родительского элемента. Это также решит проблему обрезки в IE11, и сделает видимыми все иконки или другие наложения вне таблетки:
<button class="Button"> <span class="Button-inner"> Example </span> <!-- badge, etc. --> </button>
Мы определим некоторые стили сброса и нормализации для внешнего .Button:
.Button { background: transparent; border: 0; border-radius: 0; color: inherit; display: inline-block; font: inherit; height: auto; line-height: 1; margin: 0; padding: 0; position: relative; text-align: center; text-decoration: none; user-select: none;
}Визуальные стили (включая наши закругленные углы) и исправления переполнения WebKit / Safari для .Button-inner:
.Button-inner { align-items: center; background: #456BD9; border: 2px solid transparent; border-radius: 99em; color: #fff; display: flex; font-weight: 600; height: 2.5em; min-width: 2.5em; padding: 0 1em; position: relative; /* WebKit Bug 173872 */ transition: 0.2s ease; width: 100%;
}Давайте также разработаем несколько пользовательских состояний взаимодействия. Во-первых, мы удалим некоторые конфликтующие стили внешнего элемента (но только потому, что мы намереваемся заменить их):
.Button:focus { outline: none;
} .Button::-moz-focus-inner { border: 0;
}Это означает, что теперь мы можем стилизовать внутренний элемент на основе состояния его родителя:
.Button:focus .Button-inner { border-color: #fff; box-shadow: 0 0 0 2px #456BD9;
} .Button:hover .Button-inner { filter: brightness(1.1);
} .Button:active .Button-inner { filter: brightness(0.9);
}И вуаля! Кнопки в форме таблеток, которые хорошо работают во всех браузерах, не уменьшая площадь элемента и не обрезая контент:
Так как это решение вводит больше разметки и не будет работать с самозакрывающимися тегами, такими как input или select, вероятно, лучше не использовать его, если у вас значения border-radius невелики. Если есть сомнения, попросите нескольких человек проверить ваши кнопки на реальных устройствах, чтобы выявить любые проблемы.
Автор: Tyler Sticka
Источник: https://cloudfour.com
Редакция: Команда webformyself.