Как сделать такую кнопку?

Question

[Бай Кабиров]

мне бы инструкцию как такую кнопку сделать, или ресурс где можно посмотреть как такую сделать, что бы она искажала другой объект на который наведена.
Буду очень благодарен.

Comments

[Сергей Сергей]

https://www.youtube.com/watch?v=ArTVfdHOB-M отсюда и до просветления.

Answer 1

[Сергей delphinpro]

Если вы про красную круглую кнопку, то ее очень легко сделать =)
Что касается картинки, нужно сделать для ее маску с требуемым контуром.
css mask, svg mask, clip-path

Comments

[Бай Кабиров]

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

[Aetae]

Бай Кабиров, тебе ответили свойства какие нужны - дальше сам

Разве что если лень и фон однородный можно забить на всю эту новомодную хрень и по-дедовски сделать png нужной формы и закрывать им кусок картинки создавая иллюзию выреза.
Правда если когда-то потом захотят поменять фон - будут сильно на тебя ругаться, но это уже будут не твои проблемы.:)