Module «btn-arrow».

Source:

https://html.ildar-meyker.ru/html-imba/components.html?tab=tab-buttons

Демо:

Плагины:

Подключение:

//

Разметка:

//
<button class="btn-arrow w-100">
    <span class="btn-arrow__inner">
        <span>Отправить</span>
        <svg class="icon">
            <use
                xlink:href="img/icons/general/sprite.svg#arrow-right-bold"
            ></use>
        </svg>
    </span>
</button>

Стили:

//
.btn-arrow {
    @extend .reset-btn;
    position: relative;
    padding: 0 1.4rem;
    font-family: inherit;
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.2;
    text-transform: uppercase;
    overflow: hidden;

    &:before,
    &:after {
        content: " ";
        background: #fff;
        width: 8rem;
        height: 4rem;
        position: absolute;
        transform: rotate(-47deg);
    }

    &:before {
        right: 100%;
        margin-right: -1.4rem;
        top: 0;
        transform-origin: 100% 0;
    }

    &:after {
        left: 100%;
        margin-left: -1.4rem;
        bottom: 0;
        transform-origin: 0 100%;
    }

    &__inner {
        position: relative;
        z-index: 10;
        background: #fff;
        padding: 1.6rem 0;
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 1.5rem;
    }

    .icon {
        font-size: 1.6rem;
        fill: #f23f27;
    }
}

Инициализация:

//