Лаборатория кнопок
Наведи курсор, нажми, пройдись клавишей Tab. Называй буквы — что нравится, что нет.
Два витка с жёстким зазором
Второй виток строится от первого — отодвинут на 6 px по всей длине. Слипнуться не может, но зазор ровный и оттого немного механический.
Подмена контура
Линия всегда одна: при наведении первый контур мгновенно заменяется другим — как будто обвели заново. Утолщение невозможно в принципе.
Подмена контура плюс светлая заливка
Контур перерисовывается заново, и одновременно внутри проступает бледный изумруд. Заливка повторяет форму нового контура, поэтому цвет и линия не расходятся.
Подмена контура плюс полная заливка
То же самое, но эллипс закрашивается целиком и текст становится светлым. Самый громкий из «ручных» вариантов.
Светлая заливка внутри
Контур неподвижен, при наведении внутри появляется бледный изумруд.
Контур сдвигается
При наведении вся обводка съезжает на 2 px — будто лист качнули.
Линия утолщается
Один контур, при наведении перо нажимают сильнее: 2,5 → 3,6 px.
Контур плюс подчёркивание
Обводка неподвижна, при наведении под текстом появляется штрих.
Без обводки, только подчёркивание
Самый тихий вариант: текст и штрих под ним, второй штрих при наведении.
Заливка целиком при наведении
Эллипс закрашивается изумрудом, текст становится белым. Громко и понятно.
Обычная кнопка — для сравнения
Сплошная заливка, скруглённый прямоугольник. Никакого скетча.
Главная кнопка: три стрелки на неё
Три стрелки разной длины и наклона, все указывают в кнопку, ни одна не касается обводки. Разница между вариантами — в том, когда они видны и что происходит при нажатии. Жми и держи, чтобы увидеть реакцию.
Стрелки
Четыре способа. Правило у всех одно: стрелка указывает на то, что можно нажать, и несёт подпись, которой нет в самой кнопке. Стрелка, указывающая в никуда, — украшение, и её тут нет.
Проверка масштабом
То, чего не показала картинка: как кнопка живёт рядом с обычным текстом.
Событие задвоилось, а в отчёте это выглядит как рост. Прежде чем строить теорию, проверь количество событий на сессию: если сессии ровные, а событий вдвое больше — ничего не выросло.Work with me