Как сделать чтобы при нажатии css?

Во время удержания Для визуального отклика подходит button:active { background: navy; }. Этот псевдокласс не сохраняет выбор после завершения нажатия.

После отпускания Для переключателя храните состояние отдельно, например меняйте aria-pressed у настоящей кнопки и оформляйте button[aria-pressed="true"]. Сам CSS не переключает атрибут: это делает обработчик действия. Если по смыслу нужен флажок, используйте checkbox и :checked.

Фокус Не используйте :focus как замену включенному состоянию. Фокус означает цель ввода, поэтому может уйти на другой элемент независимо от выбранной настройки. Для клавиатурной навигации сохраните заметное оформление :focus-visible. Внутри формы у отдельного переключателя обычно нужен type="button", чтобы он случайно не отправил форму.

Для эффекта нажатия задайте button:active { background: navy; }. Для сохраненного выбора используйте отдельное состояние: например, кнопка с aria-pressed="true" и правило button[aria-pressed="true"] { background: navy; }. Атрибут должен обновляться логикой переключения. Focus не заменяет это состояние, поскольку означает текущую цель ввода, а не выбранную настройку.

Мне нужно именно после отпускания, значит одного active мало.

С aria-pressed понятнее, чем красить через focus.