Как сделать подобную анимацию?

Question

[DaniilPo]

https://dribbble.com/shots/14026036-Send-Button-In...

как сделать что-то подобное используя ccs или js?
не обязательно прям точь в точь но хотя бы само переливание и изменение текста
и html я не могу трогать

Comments

[Вадим]

и html я не могу трогать

Заменяйте содержимое кнопки видеофайлом\гифкой по клику :D

Ну а если серьёзно... Что значит "переливание"? Когда появляется зелёный блок? Ну сделайте это псевдоэлементом, спозиционируйте за пределами кнопки, кнопке overflow: hidden и потом перемещайте псевдо в область кнопки.

и изменение текста

В свойство content у псевдо задвайте какой текст надо и готово.

[DaniilPo]

Вадим, было бы всё легко если бы можно было бы создать этот самый псевдо элемент, но как я и сказал я не могу изменять html по этому и добавить этот элемент не могу в этом и есть вся сложность

[Вадим]

DaniilPo, вам было бы ещё легче, если бы вы чуть чуть подучили матч часть. Псевдоэлементы потому и называются псевдо, что их нет в разметке. Они создаются через css, по средствам ::before/::after

[DaniilPo]

Вадим, угум.. хорошо капну в это направление, спасибо

[DaniilPo]

Вадим, такой вопрос с

<input type = "submit" value = "Send" class = "buttona" >

это возможно провернуть ?
просто пробовал с кнопкой просто и всё было супер но и input по какой-то причине не работает

.buttonsubmit::after  {
    content: "test";
    padding-top: 0em;
    padding-left: 1em;
    position: absolute;
    top: -306px;
    left: -785px;
    width: 340px;
    height: 80px;
    border-radius: 40px;
    background: lightgreen;
    font-size: 1rem;
    margin-left: 400px;
    margin-top: 300px;
    border: 2px solid gray;
    color: white;
    animation-duration: 3s;
    animation-name: sheen ;

}

https://jsfiddle.net/8cebjmdn/

[Вадим]

DaniilPo, у инпутов нет псевдоэлементов

[DaniilPo]

Вадим, то есть это возможно провернуть только если обернуть инпут в див и через него уже и создавать псевдоэлемент и ни как иначе?

[Вадим]

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

[Вадим]

DaniilPo, но Вы можете добавить блок на js

[DaniilPo]

Вадим, ну хорошо спасибо вам большое очень сильно помогли

Answer 1

[JRBRO]

Можно начать с простого

https://www.w3schools.com/howto/howto_js_animate.asp

, а потом уже нарастить

Comments

[DaniilPo]

к сожалению это простое мне ничего не даст
в самих анимациях я примерно разбираюсь (только в css анимация не сильно)
изначально я хотел это сделать всё через псевдо элемент но его использовать я к сожалению не могу так как доступа к html у меня нету (могу объяснить почему, но не думаю что это что-то изменит)

[JRBRO]

https://animista.net/ ну а такое пробовали?