Как снять фокус с кнопки после клика, если на ней установлен transform: scale(1.1)?

Question

[Teo Soph]

На сайте установлена кнопка заказа билета, на которой висит transform: scale(1.1) при фокусе.
Когда наводишь на неё курсор она увеличивается и остаётся увеличенной после клика.

Проблема: как сделать авто-сброс фокуса с кнопки с последующим её уменьшением до scale(1)?

Попытка решения: установленный event.target.blur() решает проблему на половину, фокус теряется, но для этого нужно пошевелить мышью.

Вопрос: как сделать так, чтобы фокус сбрасывался автоматически при клике без необходимости двигать мышью?

Comments

[Rustam Bainazarov]

Заменить :focus на :active.

Answer 1

[Roman Serdyuk]

Используйте псевдокласс :focus-visible вместо :focus.
И рекомендую, всё-таки чтобы состояния ховера и фокуса чем-то отличались.

Comments

[Teo Soph]

а можете пример отличия привести?

[Roman Serdyuk]

Teo Soph, :focus-visible это состояние фокуса именно с клавиатуры (когда табом был выбран элемент и он находится в фокусе). :focus - это общее состояние фокуса, как с клавиатуры, так и по нажатию мышкой/пальцем по экрану.

[Roman Serdyuk]

Teo Soph, пример отличия состояний:

&:hover {
		transform: scale($scaleMax);
	}

	&:focus {
		outline: transparent;
	}

	&:focus-visible {
		outline: transparent;
		transform: scale($scaleMax) translateY(-15%);
	}

	&:active {
		transform: scale($scaleMin);
	}

Answer 2

[Алексей Ярков]

Увеличение на :hover
Возврат размера на :active

Видимо так. Вы бы css показали лучше, чем эти абстрактные объяснения.

Comments

[Teo Soph]

прицепил скрины