Transform: scale(1.05); Как уменьшить обратную скорость?

Question

[50VAJJ]

Привет. Есть код

<a href="#">
                    <div class="talkBtn">
                        <p>Кнопка</p>
                    </div>
                </a>

.talkBtn {
    position: relative;
    top: 20px;

    width: 250px;
    height: 60px;
    margin: 0 auto;
    padding: 2px 10px 2px 10px;

    text-decoration: none;

    color: #ffffff;
    background: #96b0e4;
    -webkit-box-shadow: 0px 10px 17px -1px rgba(0,0,0,0.22);
    -moz-box-shadow: 0px 10px 17px -1px rgba(0,0,0,0.22);
    box-shadow: 0px 10px 17px -1px rgba(0,0,0,0.22);

    font-size: 20px;
}
.talkBtn p{
    text-align: center;

    color: rgb(255, 255, 255)

    font-size: 24px;

    line-height: 12px;
}

.talkBtn:hover {
    z-index: 2;

    cursor: pointer;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    -webkit-transform: scale(1.05);
    -moz-transform: scale(1.05);
    -ms-transform: scale(1.05);
    transform: scale(1.05);

    box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.5);
}

Первый вопрос. Как сделать, чтобы обратная скорость(после того как навёл и убрал) была меньше? Для лучшего понимания - https://codepen.io/cadijob/pen/xrjqRW

Второй вопрос по поводу html.
Нормальна ли такая структура?

<a href="#">
                    <div class="talkBtn">
                        <p>Высказаться</p>
                    </div>
                </a>

Когда сначала идёт ссылка а потом div? Или лучше через displey: block?

Answer 1

[Алексей Уколов]

.talkBtn:hover {
    transition: all 0.5s ease-in; // При наведении кнопка увеличивается за полсекунды
}

.talkBtn {
    transition: all 3s ease-in; // А уменьшается обратно уже за три
}

Если вам просто нужна одинаковая скорость, то transition нужно назначать для дефольного состояния без ховера. В вашем коде для уменьшения вообще transition не работает.

Нормальна ли такая структура?

Нет, кнопки нужно делать при помощи кнопок:

<button class="talkBtn" type="button">Высказаться</button>

Тем более, что ваш дизайн вполне можно реализовать при помощи одного элемента, использовать три совершенно нет причин.
А вообще, по последним спецификациям в ссылки можно вставлять блочные элементы, да.

https://youtu.be/MWJKwn_gKR4

P.S. Вендорные префиксы лучше доверить расставлять автопрефиксеру.

Comments

[50VAJJ]

Спасибо.

Нет, кнопки нужно делать при помощи кнопок:

, что бы взаимодействовать такой кнопкой с ajax нужно использовать атрибут value? Или ту же ссылку, куда вставить? В атрибут formaction?

[Алексей Уколов]

взаимодействовать такой кнопкой с ajax

Смотря как взаимодействовать. Если у вас комментарии имеют реальный URL, то тогда правильнее использовать ссылку. Если нет - то кнопку, а дальше как хотите.

Answer 2

[Леонид Князев]

Первый вопрос. Как сделать, чтобы обратная скорость(после того как навёл и убрал) была меньше?

Пропишите свойство transition не у .talkBtn:hover, а у .talkBtn
И поменяйте тайминг-функцию с ease-in на ease-in-out

Comments

[Алексей Уколов]

И поменяйте тайминг-функцию

Зачем?

Answer 3

[Stalker_RED]

1. Без js никак.
2.

The a element may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g. buttons or other links).

https://www.w3.org/TR/html5/text-level-semantics.h...

Comments

[Алексей Уколов]

1. Вполне себе "как" :)

[Stalker_RED]

Алексей Уколов: упс, торможу.