Mizutsune

Например:

.button {
    background: #63319f;
    padding: 10px 45px;
    color: #fff;
    clip-path: polygon(85% 0, 100% 50%, 85% 100%, 15% 100%, 0% 50%, 15% 0);
}

Как вариант, можно сделать через псевдоэлемент, чтобы не загрязнять разметку лишними сущностями, учитывая тот факт что эта линия - больше украшательство, чем что-то более серьезное и требущее отдельных элементов.

Вот пример:

<div class="block">
     <span class="title">Hello World</span>
     <span class="value">999999</span>
</div>

.block {
     display: flex;
     align-items: baseline;
}

.block::after {
     background: #4a4a4a;
     height: 3px;
     content: "";
     flex-grow: 1;
}

.value {
     order: 3;
}

При желании можно заменить псевдоэлемент, например на тег span.

Есть конечно ещё и другие варианты, например задать border-bottom родителю, а дочерним элементам прописать однотонный фон, чтобы он закрыл собой линию снизу и это собственно говоря и создаст эффект как на картинке(плюс-минус добавить дополнительные стили), но это наверное не столь красиво и аккуратно, выглядит, если сравнивать с первым вариантом.

Смену иконки можно реализовать без дополнительного JS. Ниже добавил два варианта решения задачи.

Первый пример:

Берем две иконки SVG. Допустим это Луна и Солнце. Далее нужно будет закодировать SVG для использования в CSS и сделать это можно, например, с помощью этого инструмента.

Далее обработанные SVG применим для иконки. Сама иконка будет представлять из себя псевдоэлемент, хотя можно использовать и HTML тег, например span, но всё же не стоит добавлять лишние сущности в разметку, если в этом нет нужды.

Добавляем в кнопку псевдоэлемент для иконки:

.btn::after {
     content: "";
     position: relative;
     display: inline-flex;
     width: 20px;
     height: 20px;
     background-size: contain;
     background-repeat: no-repeat;
}

Далее на основе выбранной темы, будем менять бекграунд иконки. Так как через JS происходит добавление класса к корневому элементу с названием текущей темы - можно воспользоваться этим и через CSS без лишних проблем менять оформление иконке.

Светлая тема:

.light .btn::after{
background-image: url("data:image/svg+xml...//иконка-солнца");
}

Темная тема:

.dark .btn::after {
background-image: url("data:image/svg+xml...//иконка-луны");
}

Хотя этот вариант и кажется простым и доступным, всё же он хранит в себе некоторые недостатки.

1. Нельзя просто взять и изменить цвет иконки при наведении.
2. При желании изменить дефолтный цвет иконки, придётся взять оригинальный SVG - вектор, перекрасить его и заново закодировать, после чего обновить значение в CSS файле.
3. Если иконки большие по обьему, они будут увеличивать размер CSS файла, но тут есть решение этой проблемы. Перед конвертацией SVG в CSS, прогоняем вектор через SVGO. Правда и это порой не сильно помогает.

Второй вариант:

Добавить обе иконки в кнопку, в качестве SVG, задать иконкам разные классы и по дефолту скрыть обе иконки, например:

<svg class="icon__light">
// содержимое SVG
</svg>

<svg class="icon__dark">
// содержимое SVG
</svg>

И через CSS менять видимость иконок.

Пример:

.icon__light,
.icon__dark {
     display: none;
}

.light .icon__light {
     display: block;
}

.dark .icon__dark {
     display: block;
}

У этого подхода тоже имеются свои подводные камни, впрочем, как и у любого способа решить ту или иную задачу, но минусами этого подхода намного проще бороться.

Можно сделать например так:

.quality__button--all {
    margin-right: 13px;
    position: relative;
    background: #FF6428;
    border-radius: 40px;
    padding: 18px 45px;
    overflow: hidden;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    color: #FFF;
}


.quality__button--all::before {
    content: "";
    background: #FF6428;
    color: #fff;
    background: red;
    border-radius: 40px;
    position: absolute;
    top: 0;
    left: 0;
    width: 0%;
    height: 100%;
    transition: width 0.3s linear;
}

.quality__button--all:hover::before {
    width: 100%;
}

.quality__button.quality__button--all::after {
    content: "Get the App";
    position: relative;
    color: inherit;
}

Ещё можно сделать без изменения ширины с помощью transform: translate:

.quality__button--all::before {
    width: 100%;
    transform: translateX(-100%);
    transition: transform 0.3s linear;
}

.quality__button--all:hover::before {
    transform: translateX(0);
}

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

Разметка:

<div class="wrapper">
     <header></header>
     <main></main>
     <footer></footer>
</div>

Стили:

.wrapper {
    display: grid;
    grid-template-rows: auto 1fr auto;
    grid-template-columns: 100%;
    min-height: 100vh;
}

Не работает потому что у вас ошибка в строчках:

menu.toggleClass('.burger-menu_active');
menu.hasClass('.burger-menu_active')

Нужно просто убрать точки перед именами классов в этих методах:

menu.toggleClass() & menu.hasClass()

Полезная информация по этим методам: JQuery - toggleClass и JQuery - hasClass и совет на будущее: Если используете ту или иную библиотеку, читайте внимательнее документацию. Это намного упрощает жизнь.

Однако уже пора отказаться от JQuery, так как эта библиотека устарела и нет смысла тянуть лишнию зависимость.

Переписать исходную функцию на нативный JS, можно например так:

function burgerMenu(selector) {
  const menuElement = document.querySelector(selector);

  const elements = [
    "burger-menu_link",
    "burger-menu_button",
    "burger-menu_overlay",
  ];

  const isTriggerElement = (element) => {
    return [...element.classList].some((className) =>
      elements.includes(className)
    );
  };

  menuElement.addEventListener("click", ({ target }) => {
    if (isTriggerElement(target)) {
      toggleMenu();
    }
  });

  function toggleMenu() {
    menuElement.classList.toggle("burger-menu_active");
    menuElement.classList.contains("burger-menu_active")
      ? document.body.classList.add("no-scroll")
      : document.body.classList.remove("no-scroll");
  }
}

burgerMenu(".burger-menu");

И немного дополнить стили.

Добавить правило pointer-events: none для элемента .burger-menu_lines

.burger-menu_lines {
   pointer-events: none;
}

И добавить новый класс:

.no-scroll {
   overflow: hidden;
}

Намного проще написать подобный функционал на чистом JS и не стоит тащить в проект зависимость в виде Jquery. Лучшие времена этой библиотеки уже давно прошли.