Нужно всего лишь вспомнить о том, что есть относительные единицы измерения. Такие как vw, vh, vmin, vmax и %.
И также calc.
И ещё, что расчет % у разных свойств идет от разных величин. Например, у координат (top, left) от размера родителя, а вот в трансформе от самого элемента.
Знаете, валидатор с ошибками, в коде бардак и т.д. - это всё не так страшно, как ваша фраза из цитаты.
Сайт на любом экране должен выглядеть нормально. Не выпирать, не разваливаться, быть читаемым и используемым.
ICUI4CU, кнопки это особенные элементы. Где-то тут я давала ссылку на статью по этому поводу, но самой снова искать лень.
И ещё два нюанса:
1. Вы сначала задали body шрифт, а потом all unset кнопке.
2. Но даже если вы зададите шрифт прямо кнопке в коротком формате, line-height у неё останется normal.
А вот в явном виде line-height: 1.5 сработает
MentalControl, в SVG вы можете нарисовать детальки как вам нужно, хоть зигзагом, хоть змейкой. И при наведении изменять заливку fill или обводку stroke.
felony13twelve, если нравится тащить к себе в проект чужой устаревший мусорный код, то я же не возражаю, тащите.
Вы достаточно четко дали понять, что на самом деле не хотите знать и разбираться как правильно, в своем вчерашнем вопросе. Я принимаю вашу позицию. Но не стоит мешать другим разбираться с волнующими их вопросами.
И рекомендую придерживаться правил форума и заек оставить при себе.
И также calc.
И ещё, что расчет % у разных свойств идет от разных величин. Например, у координат (top, left) от размера родителя, а вот в трансформе от самого элемента.
Аналоги (которые мне лень переделывать под каждый из таких вопросов)
https://codepen.io/AnnaSummer/pen/QWQOvzy
https://codepen.io/AnnaSummer/pen/eYVeWXR (красная заливка лишь для того, чтобы было понятно как это работает)
И всегда есть SVG. Один раз нарисовал и масштабируй и подсвечивай сколько угодно.