Верстка кастомных кнопок

Общее описание:

Требуется сверстать кнопки,  используя фреймворк Vue 3. Кнопки имеют необычную форму.  Будут использоваться на торговой платформе в качестве открытия позиции (Sell/Buy).  Верстка должна быть кроссбраузерная. Figma файл прилагается.

Техническое описание:

- Кнопки должны иметь градиентный бордер

- Бекграунд - градиент

- Наружная тень вокруг кнопки по форме кнопки

- При ховере должна быть анимация градиента (меняется затемненная сторона)

Пример:

- У кнопок есть несколько состояний. На активной кнопке появляется внутрення тень по
 форме кнопки,  вторая кнопка стает недоступной и затемненной

- Должна быть возможность менять размеры без соблюдения пропорций

- Все должно быть анимированным. Использовать канвас не желательно. Хорошо если это будет Vue 3 компонент

Критерии успешного результата: 

- скинут проект и инструкция как его развернуть

- проект поднят локально заказчиком 

- верстка соответствует требованиям,  описанным в техническом описании выше

- верстка соответствует Figma