Как сделать чтобы анимация срабатывала по нажатию?

Question

[Hiroshima]

Как сделать чтобы при нажатии на (focus) кнопку с классом "but-p" срабатывала анимация на одной кнопке ?
анимация должна переворачивать стрелку вверх.

Данный класс "but-p" присутствует и на других кнопках где есть стрелка !

.but-p {
                font-size: 14px;
                height: 30px;
                text-align: left;
                padding: 2px 0px 2px 10px;
                border: none;
                background-color: #fff;
                outline: none;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: #8a8a8a;
                cursor: pointer;
                width: 100%;
                margin: 10px 0;
                position: relative;
            }
            
            .but-p:focus { 
                box-shadow: 0 0 10px rgb(255, 255, 255);
                transition: 0.2s;
            }
            
            .strelka {
                width: 15px;
                transform: rotate(0deg);
                transition: 0.3s;
                padding: 0 20px;
                position: absolute;
                right: 0;
            }
            
            .strelka:focus { /* 1 */
                transform: rotate(180deg);
            }

(комментарий:1) - ну по моей логике это вот так должно быть, тока чтобы на одной кнопке срабатывала, а не на всех.

Я конечно знаю как сделать то что я хочу, но это будет не правильно (взять написать в css анимацию для стрелки и при нажатии чтобы она срабатывала через js (jQuery) то есть вот так:

$(function() {
    $('.strelka').hover(
        function() {
            $('.img-slider1').css('animation', 'linear 0.3s FocusStrelka');
        },
        function() {
            $('.img-slider1').css('animation', 'none');
        }
    )
})

мину такого способа в том что, нужно будет задавать id или class каждой кнопки и дублировать который я ранее писал.

Answer 1

[Ankhena]

Неизвестно, что у вас в разметке, так что так:
https://jsfiddle.net/g389zhdq/

Comments

[Hiroshima]

Мне нужно чтобы, картинка переворачивалась по нажатию на кнопку, извиняюсь, что разметку не указал.

<button type="button" class="but-p-duo">
                                    <span>до</span>
                                <img src="/images/icon/strelka.png" class="strelka">
                            </button>

[Ankhena]

Hiroshima, ваша стрелка не является контентным изображением, это украшение.
Вставляется фоном псевдоэлемента.
Дальше по сценарию из моего примера.

[Hiroshima]

Ankhena, У меня что то пошло не так ) Я все сделал как вы написали, но не происходит анимация.

<button type="button" class="but-p">
                                <span class="test">Марка</span>
                            <!-- <img src="/images/icon/strelka.png" class="strelka"> -->
                        </button>

.test::after {
                content: "";
                display: inline-block;
                vertical-align: middle;
                width: 10px;
                height: 10px;
                border-right: 2px solid #333;
                border-bottom: 2px solid #333;
                transition: transform 1s;
                position: absolute;
                right: 0;
                margin-right: 10px;
                transform: rotate(45deg);
            }
            
            .test:focus::after {
                transform: rotate(200deg);
            }

[Ankhena]

Hiroshima, я не знаю, что у вас на проходит.
Всё работает https://jsfiddle.net/x81h3yjt/

[Hiroshima]

Ankhena, Дэбилизм творится, я применил не к кнопке, а к надписи (Спасибо за помащь)

[Ankhena]

Hiroshima, ничего, бывает )))

[Hiroshima]

Ankhena, Можете еще помочь ? Я не знаю как обратится к ".text-unsold::before" чтобы добавить при клики "content: "✓";"

Я хочу это реализовать через jQuery (но не знаю как :) )
примерно как оно должно выглядеть (тока свойства естественно другие).

$(function() {
    $('#click-katalog-1"').click(
        function() {
            $('#click-katalog-1').css('border-bottom', ' 2px solid #222');
        },
        function() {
            $('#click-katalog-1').css('border-bottom', ' 2px solid #222');
        }
    )
});

[Ankhena]

0. catalog пишется так
1. В js лучше вообще ничего не стилизовать,а манипулировать классами.
$(this).toggleClass("active")
2. В CSS
.active::before {content:"✓"}

[Hiroshima]

Ankhena, Спасибо