Рекомендую более актуальный материал!

<button class="addToCart" data-id="001">в массив 1</button>
<button class="addToCart" data-id="002">в массив 2</button>
<button class="addToCart" data-id="003">в массив 3</button>
<button class="addToCart" data-id="004">в массив 4</button>

var cart = {};

function addToCart(articul) {
  cart[articul] = 1;
  console.log(cart);
}

var addBtn = document.getElementsByClassName('addToCart');
[].forEach.call(addBtn, function(element) {
  element.addEventListener('click', function() {
    addToCart(this.getAttribute('data-id'));
  });
});

Лучше конечно CSS +SVG
gif на весь экран и видео слишком громоздкие получатся.

А готовых CSS бабочек предостаточно, не думаю что потребуется заказывать на фрилансе, можно просто "подпилить" под свои нужды. Вот например отличный вариант или вот или можно взять вот эту и самому задать нужную траекторию движения.

Вариантов куча, пользуйтесь поиском

По умолчанию в браузере следующие размеры:
100% = 1em = 1rem = 16px = 12pt
Следовательно если Вы задаете размер в css элементу html равным 200%, то общий размер шрифта на всей странице будет 32px

Не рекомендую пользоваться процентами. Для относительных размеров лучше использовать rem и em
rem задает размер шрифта элементу независимо от размера шрифта родительского элемента
em задает размер шрифта элементу относительно размеру шрифта родительского элемента

В этом помогут псевдоэлементы ::before и ::after
Изображение оборачиваем в div (например с классом .image-box)
обертке назначаем position: relative
и добавляем псевдоэлемент (например .image-box::before)
псевдоэлементу назначаем position: absolute
Дальше сам...

о псевдоэлементах...

пример рамки