Как сделать что-бы текст был поверх?

Question

[Yaroslav723]

.btn{
    background: $main-color;
    font-family: 'Aleo';
    font-style: normal;
    font-weight: 400;
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: #FFFFFF;
    padding: 18px 40px;
    transition: all 0.3s linear;
    position: relative;
    
    
    &:hover{
        filter: brightness(0.7);
    }
    &::before{
        content:"" ;
        width: 112px;
        height: 100%;
        background:#496BFE;
        position: absolute;
        top: 0;
        left: 0;
        clip-path: polygon(1% 0, 40% 0, 96% 99%, 0% 100%);
        
    }
}

Comments

[Сергей delphinpro]

1. какой текст?

2. Зачем тег sass, если речь идет о возможностях CSS? (не важно, что вы пишете его на sass)
Тег sass нужен, когда речь идет о специфике именно этого надязыка (допустим, циклы, миксины, и тп.), а не об отображении в браузере.

[Ankhena]

Оберните текст в span и задайте z-index

Либо основной цвет делайте через псевдо и оба псевдо, наоборот, вниз.

[Yaroslav723]

Сергей delphinpro, поправил, текст кнопки

[Yaroslav723]

Ankhena, через span не работает

[Сергей delphinpro]

Yaroslav723,

не работает

вот сейчас очень хочется ругнуться – не пиздите! Или предъявите доказательства.

[Ankhena]

Yaroslav723, я поддерживаю Сергея

Answer 1

[Антон Романков]

Замените &::before на это

background: linear-gradient(45deg, rgb(80, 106, 245) 45%, rgb(91, 115, 244) 45%);

Вот тут пример: https://codepen.io/romant094/pen/yLKVObg?editors=1100