Спасибо всем за ответы, на самом деле все комментарии оказались полезны. Они помогли мне закрыть некоторые пробелы в понимании быстрее и подкинули идеи для того, чтобы найти лучшее на мой взгляд решение.
Сергей delphinpro объяснил, что на сегодняшний день невозможно заставить свойство CSS, которое задает цвет выделения, появляющееся над ссылкой/кнопкой на мобильных устройствах при нажатии на нее, учитывать border-radius элемента. Поэтому мне пришлось отменить это свойство.
/*Отменить свойство CSS, которое задает цвет выделения, появляющееся над ссылкой/кнопкой на мобильных устройствах при нажатии на нее*/
a, button {-webkit-tap-highlight-color: transparent;}
Но в то же время пользователь должен видеть, на какой элемент он нажимает, и знать, что его касание успешно распознано.
Александр предложил применить эффект hover. Но на мобильных этот эффект остается после нажатия на элемент, что некорректно и может смутить пользователя. Я применяю :hover только при наведении мыши на элемент.
/*Задать стиль, который действует только при наведении мыши на элемент*/
@media(hover: hover) and (pointer: fine){
a:hover, button:hover {стиль при наведении мыши на элемент}
}
Тогда на мобильных не отрабатывает эффект.
Необходимо стилизовать и применить эффект, который срабатывает при нажатии на элемент и не остается после нажатия.
/*Задать свой стиль при нажатии на элемент*/
a:active, button:active {стиль при нажатии на элемент}
Также мне важно знать, есть ли какие недостатки этого варианта. Буду признательна за комментарии по этому поводу.
Простой