дизайн кнопки с переполнением

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

• Переместите 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 шириной в один пиксель, который является прозрачным сверху и красным снизу, и используется в качестве фона ...

Answer 2

нажмите, чтобы запустить программу

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

Измените свой стиль следующим образом.

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