html - 带溢出的按钮设计

Question

嘿，我正在尝试创建一个精美的按钮，但问题是我无法让我的文字覆盖。

因为这个原因我无法得到一个例子，有没有人有建议。

.btnStyle{
    border: none;
    background-color: #EB343D ;
    color: #FFFFFF ;
    
    &:after{
        content: " ";
        padding: 10px 
    }
    &:before{
        content: " ";
    }
    span{
        position: absolute;
    }
}

<button type="button" name="button" class="btnStyle"><span>Click here</span></button>

当我在跨度上使用绝对位置时，我希望该元素在 btn 上是绝对的。

Answer 1

click to run the program

enter code here Html
<button type="button" name="button" class="btnStyle"><span>Click here</span></button>

css
.btnStyle{
    border: none;
    background-color: #EB343D ;
    color: #FFFFFF ;
    }
    .btnStyle:after{
        content: " ";
        padding: 10px 
    }
    .btnStyle:before{
        content: " ";
    }
    span{
        position: absolute;
    }