Кнопка

Крок 6.7. Кроки 6.1-6.6 звели правила й лишили імена: 704 кнопки на 39 екранах носили 56 різних класів і давали 44 різні вигляди. Тепер вигляд висить на класі, а старе ім'я лишається в розмітці як гачок компонента - де кнопка стоїть, а не яка вона.

Власник знайшов на сайті три кнопки й не знайшов їх на цій сторінці. Жодна з трьох не була помилкою розмітки, і всі три виявились претензією до стенда, а не до компонента. Знято обходом 39 кольорових екранів у двох в'юпортах: 657 видимих кнопок, з них залитих 235, контурних 159, текстових 153, з підкладкою 110.

У наборі вище великий розмір це 18px. На товарній сторінці «У кошик» - той самий btn--accent btn--l - міряється 18 на 1280 і 16 на 360. Це не дрейф, це правило, яке живе в button.css з кроку 6.8 і якого стенд не показував: сторінка показувала один в'юпорт, а компонент має два.

Причина одна: кнопка не переносить рядок. У колонці 360 ширина 328, і три підписи в неї не вміщались - «Повідомити про надходження» роздувала блок покупки до 404 і гнала сторінку вбік. Тому нижче 480 кожен розмір віддає один щабель бокового повітря, а великий ще й сідає на кегель середнього. Висота й палець не рухаються ніколи.

«Для тренерів →» на банері й «Усі товари →» у заголовку розділу на стенді не було, бо стрілка не була з набору. Виміряно: 34 кнопки закінчувались типографським знаком (32 це →, 2 це ▾), і жодна не вживала компонент позначки, тоді як справжню кінцеву позначку носили рівно 8 кнопок - тригери меню, які малює menu.js. Три малюнки на два значення.

Спершу тут було написано, що так і треба, бо знак росте разом із підписом сам. Аргумент виявився неповним, і його зламала одна річ: → це U+2192, тобто частина підпису, і читач екрана вимовляє його. «Усі товари →» звучить як «Усі товари, стрілка вправо» - напрямок, прочитаний уголос як слово. Позначка з aria-hidden мовчить, а декорація й має мовчати. Що ж до росту разом із підписом - це вміє 1.15em у button.css, тож єдина перевага знака була в наборі й так.

Адресовано контролем і позицією, а не списком імен: будь-яка кнопка, чий підпис закінчується знаком із мапи, де б вона не стояла. Та сама поправка, яку на кроці 7 отримав вартовий числових полів: правило, що дістає лише туди, де хтось згадав ім'я, і є дефектом. Пробіл перед знаком іде разом із ним - кнопка це flex-ряд із gap, і збережений пробіл відсунув би позначку вдвічі далі за решту набору.

Дві позиції - два різні правила, і тепер обидва в коді. Ведуча позначка це іменник: вона називає річ, над якою дія, і має власну драбину - 18 / 20 / 24 за розміром кнопки. Кінцева позначка це пунктуація: вона каже, куди веде натиск, і росте разом із підписом - 1.15em, хоч би якого розміру була кнопка. До 7.5 друге правило жило в цьому абзаці й не діяло ніде: єдиним кінцевим знаком у продукті був набраний символ, який іншого вибору й не мав. Тепер це :last-child у button.css, і модифікатора знову не треба - бік уже сказала розмітка.

Каретка більше не намальована двічі. ▾ літерою на .dpcity був другим малюнком того самого знака; тепер це чеврон із icons.js, як на 8 тригерах меню. Разом із літерою пішов і .dpcar - спан, який існував тільки щоб зменшити її до 10px.

Спершу було закрито тільки для кнопок, і це було видно. Переміряно після 7.5: лишилось 20 кінцевих знаків, і жоден не на кнопці - «Докладніше про програму →», «Усі покупки →», «Як це працює →», ▾ у .chev, плюс усі шапки колонок мега-меню. Усе це посилання, а пас був адресований [class*="btn--"]: той самий знак і далі мав два малюнки, просто розділ переїхав на один клас убік.

Крок 7.6 переніс адресу з кнопки на контрол - a, button, summary, [role=button]. Не на ще один список імен, і не на текст: абзац у цей перелік не входить, тож копія лишається копією. Разом із цим і розмір переїхав із button.css у icon.css: пунктуація не може мати один кегель на кнопці й інший на посиланні, тож правило тепер одне - .uiv-ic.uiv-trail svg{ 1.15em }, і воно однакове скрізь.

Клас btn--text на стенді один, а на сайті він рендериться кількома способами, і обробка навмисне оголошувала font-size: inherit, тобто тип бере не вона, а речення довкола. На кроці 7.8 це перевірили лічбою, і речення виявилось мовчазним. Браузер обійшов 39 кольорових екранів і зняв 163 елементи з класом btn--text у 12 комбінаціях. Одиниця тут інша, ніж у переписі вище: там рахували форми кнопок, тут - кожен елемент, разом із голими серцями.

Сім із семи підписів дали 14 - і жоден не взяв це число зі спадкування. Кожен написав його своєю рукою, у своєму файлі: section-head, cart-row, checkout-form (двічі), address-card. П'ять власників на одне значення, і inherit, який не вирішував нічого в жодному з них. Це і є форма, якої дрейф набуває до того, як стає дрейфом: поки що все правильно, але місця, куди прийти й змінити, не існує.

Зроблено на кроці 7.8: .btn--text{ font-size: var(--fs-14) }, п'ять повторів знято. Вага лишилась на inherit - її ніхто не міряв, тож і рухати нема підстав. Переміряно 73 сторінки у двох в'юпортах, 135 256 елементів, 33 властивості плюс геометрія: жодна текстова кнопка продукту не зрушила ні на піксель. Три рядки без підпису теж не зрушили - .fmore і .lfav тримають власні числа, а в іконкових коробка 44 і позначка 20 абсолютні, тому кегель під ними інертний.

А ось стенд зрушив, і саме в цьому був сенс. Зразки btn--text на цій сторінці малювались 16-м, бо демо-коробка навколо них 16-та - тобто стенд показував текстову кнопку більшою, ніж її бачить покупець. Це той самий розрив «у системі один кегель, на продукті інший», з якого почався крок 7. Тепер зразок нижче міряє 14, як і на сайті.

Раніше тут стояло відкрите рішення власника - «дати базу 14 / вторинне чорнило», з розрахунку «14 у 43 випадках з 57, вторинне в 42 з 57». Половина того розрахунку була хибна, і хиба була в одиниці: рахувались екземпляри, а 83 однакових серця на картках перетягували підсумок на вторинне чорнило. За комбінаціями класів картина протилежна - з семи підписів шість носять основне чорнило, і виняток рівно один, .sech .all. База --text-body вже стояла правильно, і чорнило не рухали.

Чотири рядки таблиці стоять на одному екрані - це картка профілю в кабінеті: «Змінити - код у SMS» біля телефону, «Додати - код на пошту» біля пошти, «Змінити» біля мови, «Видалити акаунт» унизу. До кроку 7.6 вони носили ще й btn--inline і через це рахувались окремо.

Знахідка, і вона проти чинного коду. btn--inline оголошений для кнопки, що стоїть усередині речення, де більше ніщо не каже, що це контрол - і сам button.css додає: «у ряду контролів позицію вже сказано». Виміряно всі чотири: три стоять у .pf-row, це flex з space-between, притиснуті праворуч, і в тому вузлі поруч із ними немає жодного слова; четверта стоїть сама у своєму блоці. Жодна не всередині речення. Тоді я дописав «а справжнього вживання в продукті немає взагалі» - і це виявилось неправдою, знайшов власник. Хиба методу, не арифметики: я міряв елементи, які вже носили btn--inline, і робив висновок з них, замість шукати ті, які мали б його носити. Справжнє вживання є, воно одне, і про нього нижче, у пункті 5. Тобто підкреслення, яке малює btn--inline, тут прикраса, якої власне правило системи не просить: сусід по задачі - .sech .all, 28 таких самих текстових дій праворуч у ряду, і в них підкреслення немає, роботу робить ховер. Знято на кроці 7.6 за рішенням власника: усі чотири втратили btn--inline, підкреслення зникло, чорнило й ховер не рухались (основне в спокої, акцент під курсором). Після цього btn--inline не вживається в продукті жодного разу - як і btn--ghost середнього розміру, він лишається в наборі оголошеним і невжитим, і сторінка каже це вголос замість того, щоб показувати його як щось наявне.

Сторінка каже S 40 · M 52 · L 64, і це правда для кнопки з підписом. Браузер обійшов 39 екранів і зміряв 504 кнопки з коробкою: на цій драбині стоять 233. Решта 271 - не хаос, а всього вісім видів, і сім із восьми це два числа, 44 і 46.

Чому саме клампом, а не «хай самі». Зняли кламп і зміряли: .numbtn дав 40 і 43 (один несе двоповерхові підпис+значення, другий просто слово), а .stack - 60.6 і 63, бо це колонка, позначка над підписом. Чотири різні числа в одному ряду - це рівно те, для чого клампи існують. Питання було тільки в числі, і відповідь уже стояла в системі: 44, мінімум пальця, на якому в цьому ж ряду стоїть кошик. Перевірено на всіх 34 сторінках із шапкою: на 44 вміст не вилазить за коробку ніде, на 40 - не вміщається.

Поле пошуку піднялось назустріч з 40 на 44, і тепер увесь рядок шапки має одну висоту. Воно читає field-grp--s, чия єдина робота і є 40, тому це перекриття в header.css, а не зміна щабля: малий інпут скрізь інде лишається 40. Шапка це поверхня для пальця, і її контролам місце на мінімумі пальця, а не під ним. Зняти --s із розмітки не можна звідси - вона живе в спільному wireframes/_nav.js; це записано на крок 6.

Знайшов власник, зі скріншота: <a class="more" href="#seo">Читати більше ↓</a> у ввідному абзаці лістингу. Виміряно: <a>, inline, 14px, 700, акцент. Дія, написана словами всередині речення - рівно те, для чого оголошений btn--text btn--inline, і рівно те, чого за моїм записом на 7.6 у продукті «немає взагалі». Чотири входження на чотирьох сторінках лістингу, і це єдиний чесний --inline у крамниці.

Разом із кнопкою переїхав і абзац. .lintro і .lintro .more лежали в loyalty-rung.css - файлі про щаблі лояльності - хоча .lintro стоїть на 11 сторінках (index, три home, сім listing) і на жодному екрані лояльності. Розділ на кроці 3 переніс їх туди просто тому, що в _wf.css вони лежали поруч. Тепер вони в seo-text.css, і це не «кудись подалі»: у SEO-тексту два кінці - ввідний абзац під H1 і повний блок з id="seo" внизу тієї самої сторінки, а href="#seo" веде з першого в другий. Один компонент, один файл.

Що зрушило. 73 сторінки × 2 в'юпорти: рухнули рівно чотири елементи - самі посилання. display з inline на inline-flex (коробка бере всю висоту рядка, 17 → 22.4, базова лінія на місці), text-decoration з none на underline. Абзац не перевився, висота його лишилась 44.8, і жоден інший елемент на жодній сторінці не зрушив - тобто перенесення правил між файлами не програло жодної гонки в каскаді. Решта різниць у знімку - ті самі скелетони й спінери, шум приладу.

Було відкрито, ЗАКРИТО 12.08.2026 - рішення власника. 14px bold акцентом - це 3.13:1 на білому, а DESIGN-artifacts.md пускав акцент на текст лише від 19px bold. Бар'єр провели через ціну і не приклали більше ні до чого. Приклали на 8.19, до всього продукту одразу: для крамниці недобір за AA прийнятний, і ця кнопка лишається помаранчевою. Вона одна з шести названих класів - повний перепис і числа на color.html.

Це знімок ДО перепису класів, і він лишається на сторінці, бо саме він і був підставою переписати компонент. Ліва колонка - імена, яких більше не існує як вигляду: сьогодні кожен із цих рядків це btn плюс обробка плюс розмір, а старе ім'я лишилось у розмітці тільки як гачок компонента.

Браузер обійшов 39 кольорових екранів у двох в'юпортах і зняв 8523 клікабельних елементів. Кнопкою-дією з них виявились 57 форм, і оголошують їх 38 файлів - button.css лише один із них. Ось і весь діагноз: атом був не файлом, а звичкою, повтореною в сорока місцях.

Підсвічені рядки - той самий вигляд під різними іменами: три й більше класів з однаковою обробкою, радіусом і кеглем. немає у колонці станів - форма без ховера, натиску й вимкненого стану; таких 2 серед кнопок-дій і 14 разом із текстовими.

Колонку станів перезнято на кроці 6.2, і вона змінилась у 25 рядках. Стан не можна знайти пошуком по тексту css: .wff-msg має ховер через .wff-col a:hover - правило, яке ніде не називає цей клас, - а .btn не має жодного, хоча button.css містить і .btn, і :hover. Тепер кожне правило зі станом на суб'єкті позбавляється псевдокласу і проганяється через querySelectorAll на живому екрані: стан зараховано, якщо елемент повернувся. Рахунок ведеться по екземплярах, тому 7 з 58 у колонці означає рівно те, що написано - ховер існує лише в одному контейнері й формі не належить. Таких форм 4.

Ширина не є розміром: 48 форм auto проти 4 full. Full - виняток, і він ніколи не змінює обробку.

Матриця осей, а не перелік входжень: кожен рядок це питання, на яке відповідає розмітка, і правило, за яким обирають.

Рішення живе там, де на нього дивляться. Перепис показав дрейф, крок 5.5 його зняв - і цей блок каже, що саме обрали, що лишили і чому, на сторінці самого компонента, а не тільки в журналі.

Кнопка - це дія, а не перехід, і на кроці 6.4 це нарешті виміряно, а не проголошено: з 2 850 елементів без ґрунту й рамки 542 є діями за власною розміткою і 2 308 - посиланнями. Якщо натискання веде на іншу сторінку і нічого не змінює, це посилання: див. Рядок посилань. Підпис береться з voice/docs/microcopy.md і завжди каже, що станеться («У кошик», «Оформити замовлення»), а не де ти опинишся.

Правила вживання, які називають саме цей компонент: U8 · U9. Автор правил один, і це architecture.html, розділ I; тут - витяг.

btn--accent це фініш, а не ранг. Видимих акцентних кнопок буває 13 на одному екрані, бо акцент носить кожна кнопка «У кошик». Дві залиті акцентні дії не стоять одна над одною в одній зоні. Ряд із двох дій береться патерном .actions, а не новим ім'ям контейнера.

Крок 6.2 дав акцентній обробці два стани, яких у продукті не було взагалі. :active читає --bg-action-pressed - роль, що вже існувала і була прочитана рівно один раз, кнопкою «Каталог» при відкритому меню: її назвали «натиснутий акцент», а вжили як варіант. :focus-visible читає нове --ring-focus-control: --ring-focus - це підсвітка всередині краю, вона працює на білому полі й зникає на помаранчевій заливці, бо це той самий колір. Кільце контрола малюється зовні: розрив кольором сторінки, потім акцентна лінія.

Наведення не чіпали. opacity:.93 лишилось, бо три компоненти перефарбовують .btn.dark на темному тлі і кожен гасить цей ховер через opacity:1 - зміна осі тут тихо зламала б усі три.

Крок 6.3 замкнув контурну. Було: .btn:hover не існував ніде, а сім із 58 екземплярів реагували через чуже локальне правило в .pstrip. Стало 58 із 58, і той самий ховер у всієї родини.

Винятки названі поіменно. .sbtn і .co-soc підіймаються на --elevation-control замість акценту - це один контрол «увійти через Google / Apple» під двома іменами. .auth-x і .cd-x - це ✕ діалогу: обробка в них іконкова, мітка лишається тихою, а під курсором підіймається теплий ґрунт - закриття не є дією того екрана, який воно закриває. БОНУСИ і КОШИК лишились контурними за рішенням власника: це два лічильники шапки, вони несуть число, а число потребує рамки.

Крок 6.5 додав четвертий стан - вимкнено. Він не обробка: це та сама кнопка, якої зараз не можна натиснути, тому тримається на атрибуті, а не на класі. Дві форми, бо їх дві й було: у контрола з коробкою гасне коробка, у контрола без коробки блідне сам знак.

У переписі без жодного стану лишились три форми-дії, і третя з них у списку помилково: .cd-blocked і є вимкнений стан, тому власного ховера в неї бути не може. Справжніх дві - .on у галереї та .ord-h, заголовок рядка замовлення, який його розкриває.

Цей файл був єдиним у системі, хто мав стан натиску. Перепис у браузері по 39 кольорових екранах: 3 854 контроли, до яких палець реально дістає, і 503 з них відповідають на натиск. Усі 503 - кнопки. Решта 3 351 під пальцем не робить нічого, і 52 з тих сімейств відповідають миші. Тобто відповідь існувала, її просто написали під другорядний пристрій.

Жодного нового значення. Обидві землі лежать у tokens.css з кроку 5.5 і названі саме під цю роботу: --bg-action-pressed витягли тоді як «єдиний стан натиску в продукті, і в нього не було імені». Тепер у нього ще шість.

Іконкова кнопка теж відповідає, і це нове. --text відмовляється від натиску, і причина - про слово. Іконкова кнопка не слово, і цей файл сам це каже там, де видає --text --icon короб 44px. Відмова, написана для підпису, керувала 92 позначками, яким є чим відповісти. --ghost --icon у селектор не входить: .btn--ghost:active уже дає ту саму землю.

Перепис у браузері по 40 кольорових екранах: десять руйнівних контролів, розкиданих по чотирьох обробках цього файлу плюс одна, що не має обробки взагалі, і чотири з десяти залиті акцентом. Три з тих чотирьох це підтвердження - та сама кнопка, яку тиснуть у мить, коли дані вже йдуть.

Найгучніший і найзвабливіший об'єкт системи був той, що щось завершує, і він не відрізнявся від того, що щось купує. Цей файл сам каже: «акцент - це єдина дія ділянки». Видалення не є тією дією; це дія, якої намагаються не зробити випадково.

Жодного нового значення, і форму прочитано, а не обрано. Родина небезпеки лежить у tokens.css з кроку 5.5, і дев'ять файлів уже нею малюють - otp, field, empty-state, checkout-form, auth-dialog, discount, review-modal, buy-box, account-shell - як чорнило, як край або як бліду плиту. Пораховано: жоден із дев'яти не заливає --red-600, ніде і нічим. DESIGN-artifacts.md каже чому: червоне це «серйозний глибокий червоний, свідомо відділений від Signal Orange», і та сама сторінка забороняє «червоні бризки». Залита червона кнопка і є та бризка. Тому руйнівний контрол це контур із небезпечним чорнилом, а плита приходить під пальцем.

Правило спокою гасить помаранчевий ховер без вищого селектора. .btn--outline:hover це (0,2,0) і ставить --line-action; два класи це теж (0,2,0), тож нічия йде до порядку у файлі, а цей блок нижчий. Земля - єдине, що оголошують правила зі станами, і саме тому «вимкнено» мусило дорости на два селектори: земля на (0,3,0) інакше підсвітила б мертву кнопку. А мертва там справжня.

Коробка не зрушила. Підтвердження адреси було біле на помаранчевому 140x52 і стало червоне на прозорому 140x52. Це не збіг: кожна коробкова обробка в цьому файлі несе однаковий край 1px, тому заміна обробки на обробку не рухає нічого - саме те, що файл обіцяє вище і що тут нарешті перевірено на живій кнопці.

Сторінка звіряє себе з файлом: 50 власних класів і 5 станів оголошено в button.css. Нижче - ті, яких на цій сторінці немає ні в демо, ні в розмітці. Чужий контекст (.acc-main .addr-acts .aord-actions .bb .cd-empty .cd-foot .ci-qty .co-err-acts .co-qty .co-social .coachbn .cs-act .cshelf .fsheet-foot .notifyrow .pages .pcard .pcard-l .pm-f .pstrip .rvhead .sys-search .uiv-ic .wff-news .wfh-mi .wfh-nav .wfh-search) не рахується: у цих селекторах компонент не є підметом, він лише стоїть усередині когось.

Робота: ВІДПОВІДЬ. Рухається: background, border-color, color, box-shadow, opacity. Тривалість --dur-fast (150ms), крива --ease-standard. Значення читаються через var() з tokens.css: підміна токена в браузері веде за собою кожне з них, тобто числа у файлі немає. При prefers-reduced-motion рух зникає, а стан лишається.

Один запис на весь набір обробок, тому його носять і серце на картці, і кнопка кошика, і посилання-дія. box-shadow у списку - властивість МАЛЮВАННЯ: на одному контролі вона дешева, на списку з двадцяти карток ні, і це рішення кроку 5.

Прочитані з button.css, не переписані руками. Колір іде лише через роль, геометрія - напряму з примітива.

Якорі: .btn .navbtn .go .sbtn .fmore .goalcta .coach-newcta .cn-plus .cartbtn .wff-news

111 екранів у wireframes/: 404.html, 500.html, account-addresses-add.html, account-addresses-courier.html, account-addresses-delete.html, account-addresses-edit.html, account-addresses-empty.html, account-addresses-postomat.html, account-addresses-viddilennia.html, account-addresses.html, account-empty.html, account-error.html, account-orders-empty.html, account-orders.html ...