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

Question

[Игорь]

welovepavel.esy.es/kivi/HTML.html

https://qiwi.com



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

Как в CSS прописать кликабельность для этой части?
(так же стоит учесть что при изменении маштаба страницы этот элемент остаётся как есть.

2.и второй момент как прописать чтобы сначала была такая надпись ,а потом она исчезала,как на сайте киви .

Спасибо большое за ответ!

Answer 1

[Павел Волынцев]

Там немного кода. Вот так его можно выцепить из страницы


Вот рабочий пример codepen.io/copist/pen/qOOaXO

Comments

[Игорь]

вижу там bacground url на киви эмблема,но я хотел бы сделать на фрукт киви,мне на каком редакторе svg лучше сделать?
и можете пожалуйста порекомендовать,видео курсы или книгу на эту тему (rus)
СПАСИБО ВАМ БОЛЬШОЕ,ОЧЕНЬ ПРАВИЛЬЕНЫЙ ОТВЕТ У ВАС!))

[Павел Волынцев]

Игорь: Я для редактирования SVG пользуюсь программой Inkscape.
Для использования в веб-страницах файл SVG надо будет почистить (лишние теги, аттрибуты - их там очень много) - пользуюсь библиотекой SVGO. Вот целая подборка разных утилит на базе этой библиотеки sarasoueidan.com/blog/svgo-tools
Книги или курсов по *редактированию* SVG я не порекомендую. Я изучал по примерам, которых много в интернет, в основном на английском. Можно найти очень много примеров как сделать разные эффекты или анимацию в SVG.

[Игорь]

Павел Волынцев: Ваш ответ -лучший!
Покорно благодарю!

Answer 2

[Дмитрий Кравченко]

Киви просто пиарится на тостере, мне кажется.

1. Отлавливай событие не на span, как сейчас, а на всем блоке.
2. Скрывай эту надпись! метод .hide()

Comments

[Игорь]

Андрей Б.: хахахаха,без комментария)))))))

[Игорь]

у меня был вопрос и по картам гугл,наверно я и зассланый от гугл карты)))ГЕНИАЛЬНО