Рамка с отступом граница кнопки

Рейтинг: 0Ответов: 2Опубликовано: 10.08.2023
.intro__button-container:has(.intro__button:focus) {
    border-color: var(--color-4);
}

.intro__button-container:has(.intro__button:hover) {
    border-color: transparent;
}

.intro__button-container:has(.intro__button:active) {
    border-color: transparent;
}

<div class="intro__button-container">
                        <button class="intro__button">Подписаться на рассылку</button>
                    </div>

Есть CSS и HTML. Нужно, чтобы при фокусе на кнопку появлялась рамка с отступом от кнопки. Также, нужно удалить эту рамку, если пользователь активировал ее или навел на нее. Валидатор жалуется на данный код. Пробовал box-shadow: 0 0 0 2px transparent, 0 0 0 4px myColor, но это не то. Тем более фон - это изображение, а не сплошной цвет. Пробовал еще свойство outline, но дело в том, что в ТЗ нужна плавная анимация, а outline только появляется плавно, а исчезает резко. Помогите!

css html
Источник: Stack Overflow на русском

Ответы

▲ 0

Боюсь, средствами только CSS ничего не получится. Но при задействии Javascript - всё становится просто. Впрочем, если у вас таких блоков с кнопками будет много, моё решение не подойдёт. Я заменил классы на id, так код получается проще.

Обратным по отношению к focus (по крайней мере для кнопки) является blur - потеря фокуса, а не active или hover. Добавил в CSS цвет, заданный через переменную и родителю для наглядности добавил высоту и фон. У вас, очевидно. будут другие свойства.

const parent = document.getElementById('intro__button-container')
const button = document.getElementById('intro__button')


button.addEventListener('focus', () => {
  parent.classList.add('focus')
});

button.addEventListener('blur', () => {
  parent.classList.remove('focus')
});
:root {
  --color-4: orange;
}

#intro__button-container {            
  height: 100px;
  background-color: #999;
}

.focus {
  border: 1px solid var(--color-4);
}
<div id="intro__button-container">
  <button id="intro__button">Подписаться на рассылку</button>
</div>

При потере кнопкой фокуса - работает при нажатии кнопки Tab, например, класс focus с родителя кнопки снимается.

▲ 0

По моему :focus-within это то, что вам нужно :)

.intro__button-container {
  width: 300px;
  height: 100px;
  border: 5px solid red;
  transition: 0.5s border;
}

.intro__button-container:focus-within {
  border-color: green;
}
<div class="intro__button-container">
  <button class="intro__button">Подписаться на рассылку</button>
</div>

Про :focus-within

:focus-within применяется когда элемент содержит какого-либо ребёнка (элемент) который находится в фокусе.