#css фокусировка на кнопки и outline — вторая заметка по материалам статьи Tyler Sticka о проектировании состояния кнопок.
Оформление для элемента, получающего фокус (focus), строится в основном на css-свойствах outline (внешняя граница). По умолчанию можно задать:
button {
outline-color: transparent;
outline-style: solid;
outline-width: 3px;
}
Всё это CSS2, а в CSS3 есть ещё: outline-offset: 1px; — отступ внешней границы (outline) от границы (border), но мне такой вариант не понравился.
Теперь нам остаётся лишь указать цвет внешнего отступа для нужного состоянии кнопки:
button:focus {
outline-color: rgba(80, 124, 255, .3);
}
Обратите внимание, здесь я использовал тот же цвет, что и цвет кнопки при наведении курсора мыши, но с alpha-каналом в 0.3.
Интересно и то, что мы можем работать с комбинацией состояний, например button:focus:hover, но я не увидел в этом особого смысла.
Проблема же outline в том, что она не реагирует на border-radius и подойдёт только для кнопок без закруглённых уголков. Впрочем, это тоже решаемо … об этом завтра.
Оформление для элемента, получающего фокус (focus), строится в основном на css-свойствах outline (внешняя граница). По умолчанию можно задать:
button {
outline-color: transparent;
outline-style: solid;
outline-width: 3px;
}
Всё это CSS2, а в CSS3 есть ещё: outline-offset: 1px; — отступ внешней границы (outline) от границы (border), но мне такой вариант не понравился.
Теперь нам остаётся лишь указать цвет внешнего отступа для нужного состоянии кнопки:
button:focus {
outline-color: rgba(80, 124, 255, .3);
}
Обратите внимание, здесь я использовал тот же цвет, что и цвет кнопки при наведении курсора мыши, но с alpha-каналом в 0.3.
Интересно и то, что мы можем работать с комбинацией состояний, например button:focus:hover, но я не увидел в этом особого смысла.
Проблема же outline в том, что она не реагирует на border-radius и подойдёт только для кнопок без закруглённых уголков. Впрочем, это тоже решаемо … об этом завтра.