Как правильно реализовать анимацию?

Question

[historydev]

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

Как правильно реализовать эту анимацию для кнопки?

Comments

[Ankhena]

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

Это хорошо, что не нравится. Спека тоже запрещает это делать.

Замените на псевдоэлементы.

[historydev]

Ankhena, Да, я тоже думаю на :after, :before, но я их не трогал лет 10, попробую, спасибо.

[modelair]

зато спека разрешает span. риплоподобные штуки делают на спанах

[alexalexes]

@HistoryART
Псевдоклассы :where, :is - редкие гости в CSS, а псевдоэлементы :after, :before почти на каждый чих в оформляшке используются. Что их бояться, главное, не забывать как content активируется у них.

[historydev]

Ankhena,
Как-то так получилось, это хорошо или я сделал что-то не так?

[Ankhena]

historydev, если устраивает результат, то ок.

Что можно улучшить:
- Я бы заменила абсолют на грид. Тогда псевдо не провалится под фон страницы со своим отрицательным z-index.
- Кнопка с фикс размерами уязвима к переполнению и обычно так не делают.
- all у transition - зачем заставлять браузер думать обо всех свойствах, когда по факту меняются два.

[historydev]

Ankhena,
Здесь больше не про меня устраивает, а про максимальную оптимизацию, на мобилках будет работать.

Читал на днях про грид, как про приятную альтернативу абсолюту, попробую как руки дойдут.
Кнопка с фикс размерами только для теста.
Да, я тоже так подумал и уже поправил на opacity 1s, clip-path 1s

Спасибо!