Добавить эффект пульсации к отключенной кнопке ⇐ CSS

[Anonymous]

У меня есть кнопка, которая включается и отключается в зависимости от обязательных полей формы. Когда кнопка включена, нажатие будет иметь волновой эффект.

Я также хочу добавить эффект пульсации, когда кнопка отключена. Я попробовал что-то похожее на следующий код на Vue Playground. Я использую Vue3 с Composition API.

Код игровой площадки Vue

Как включить событие щелчка и добавить эффект пульсации, когда кнопка отключена?
импортировать {вычислено, ссылка} из 'vue' //Это основано на полях формы const DisableSubmit = ref (истина) //const rippleEffect = вычислено(() => (disableSubmit.value ? "btn-ripple" : "")) Отправить .btn-ripple { размер коробки: граница-коробка; граница: нет; курсор: указатель !важно; белый цвет; отступ: 15 пикселей 40 пикселей; радиус границы: 8 пикселей; размер шрифта: 22 пикселей; box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4); фон: #00a1d4; переход: все 0,1 с; контур: нет; } .btn-ripple { положение: относительное; переполнение: скрыто; } .btn-ripple:после { содержание: ""; позиция: абсолютная; верх: 50%; осталось: 50%; ширина: 5 пикселей; высота: 5 пикселей; цвет фона: #ffffff; непрозрачность: 0; граница-радиус: 100%; преобразование: масштаб (1, 1) перевод (-50%); преобразование-происхождение: 50% 50%; } @keyframes пульсация { 0% { преобразование: масштаб (0, 0); непрозрачность: 1; } 20% { преобразование: масштаб (25, 25); непрозрачность: 1; } 100% { непрозрачность: 0; преобразование: масштаб (40, 40); } } .btn-ripple:focus:not(:active)::after { анимация: пульсация 1 с, замедление; } .btn-ripple:после { видимость: скрыта; } .btn-ripple:focus:after { видимость: видимая; }