溢出按钮设计

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

如下更改您的样式。

.btnStyle {
  border: none;
  background-color: #EB343D;
  color: #FFFFFF;
  position: relative;
}

.btnStyle:after {
  content: " ";
  padding: 10px
}

.btnStyle:before {
  content: " ";
}

span {
  position: absolute;
  left: 0;
  top: 0;
}

Answer 2

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;
    }

Answer 3

我在尝试完成的任务上方有一张图片。我想将红色悬停扩展，将文本扩展到按钮的边缘。

我仍然是一名学习编码的学生。

Answer 4

• 将span从.btnStyle移出
• 并使用相对最高值将其更改为position: relative。 （不过，可点击区域将只是红色矩形...）
• 添加了黑色背景...

body {
  background-color: black;
}

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

.btnStyle span {
  position: relative;
  top: -8px;
}

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

另一个版本可能是一个像素宽的PNG，上面透明，下面是红色，用作背景...