Коротко: текст на кнопке меняют либо в HTML (внутри тега), либо в CSS через псевдоэлемент, если текст декоративный. Разберём, как найти нужное место и не сломать доступность.
Кому и зачемПригодится при правках интерфейса: сменить «Отправить» на «Оставить заявку», добавить стрелку, убрать лишний символ. Покажем, почему текст иногда «не меняется».
Где «живёт» текст кнопки
| Место | Как выглядит | Как менять |
|---|---|---|
| HTML | <button>Купить</button> |
править прямо в теге |
| CSS (декор) | .btn::after{content:'→'} |
править content |
| Шаблон/плагин | текст из настроек | менять в настройках |
Вкладки: способы и примеры
CODE
<button class="btn">Оставить заявку</button>Правильный способ для смыслового текста: его видят поисковики и скринридеры.
CSS
.btn::after { content: ' →'; }Подходит для декора. Смысловой текст в content размещать не стоит.
CODE
<button class="btn">
<svg width="16" height="16" aria-hidden="true">…</svg>
Купить
</button>Иконку помечаем aria-hidden="true", чтобы скринридер не читал «иконка».
Практика: три задачи
1. Найти, где задан текст
- Откройте страницу, нажмите F12.
- Выберите кнопку (иконка «стрелка» в инспекторе).
- Посмотрите разметку: есть текст в теге или в
::after? - Меняйте в найденном месте.
2. Менять текст при наведении
CSS
.btn::after { content: ''; }
.btn:hover::after { content: ' →'; }3. Убрать лишний символ
CSS
.btn::after { content: none; }ДоступностьНе переносите смысл в
content: скринридеры читают его не всегда. Основной текст — в HTML, декор — в CSS.Частые ошибки: причина → решение
| Симптом | Причина | Решение |
|---|---|---|
| Текст не меняется | задан в CSS/шаблоне | найти и править источник |
| Меняется, но не то | несколько кнопок с одинаковым классом | уточнить селектор |
| Появилось два текста | и HTML, и content |
убрать один |
| Иконка мешает | нет aria-hidden |
добавить атрибут |
Проверьте себя
Чек-лист
Где правильнее держать смысловой текст кнопки?
Вопросы и ответы
Он задан в CSS (псевдоэлемент) или приходит из шаблона/плагина. Ищите источник через инспектор.
Через ::after { content: ' →'; } — декор, поэтому можно в CSS.
Да, через :hover и смену content, но лучше менять не смысл, а иконку/направление.
Текст есть и в HTML, и в content. Уберите один из них.
Итоги
- Смысловой текст — в HTML.
- Декор (стрелки, значки) — в CSS.
- Проверяйте состояния и доступность.
Комментарии
Пока комментариев нет — будьте первым, кто поделится мнением.