Граница позади кнопки немного ниже позиции CSS

Question

Я пытаюсь реализовать кнопку CSS ниже, я пытался использовать box-shadow, а также код psuedo, т. Е. До того, как все еще не получил желаемый вывод.

нужная мне кнопка:

мой код:

.et_pb_button {
  background-color: #f16922!important;
  width: 65%;
  outline: 3px solid #f16922;
  outline-offset: 10px;
  text-transform: uppercase;
  font-size: 14px!important;
}

<a href="" class="et_pb_button">Button</a>

Answer 1

Пожалуйста, смотрите ниже фрагмент:

button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  background-color: blue;
  color: #fff;
  border-radius: none;
  text-transform: uppercase;
  border: none;
  padding: 10px 12px;
}
button::after {
  content: '';
  position: absolute;
  top: 5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 1px solid red;
  display: block;
  z-index: -1;
}

<button>View Project</button>

Answer 2

.btngroup button{
  background-color: rgb(29, 174, 236);
  border: 0;
  padding: 10px 15px;
  font-size: 15px;
  color: white;
  width: 150px;
  height: 50px;
  text-transform: uppercase
}

.btngroup .drop{
  width: 165px;
  height: 50px;
  border: 1.5px solid red;
  margin-top: -42.5px;
}

<center>
<div class="btngroup">
  <button>view project</button>
  <div class="drop"></div>
</div>
</center>

Answer 3

Вот альтернатива, основанная на предложении Ханифа, которая использует оба псевдоэлемента вместо одного с отрицательным z-индексом.Для некоторых фонов (например, изображения или градиента) может потребоваться отрегулировать положение фона для ::after

button {
  position: relative;
  display: inline-block;
  vertical-align: top;
  background-color: blue;
  color: #fff;
  border-radius: none;
  text-transform: uppercase;
  border: none;
  padding: 10px 12px;
}
button::before {
  content: '';
  position: absolute;
  top: 5px;
  left: -5px;
  right: -5px;
  bottom: -5px;
  border: 1px solid red;
  display: block;
}
button::after {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  height: 1px;
  background: inherit;
  display: block;
}

<button>View Project</button>

Answer 4

Вот идея с одним элементом, несколькими фонами и бордюрами:

.button {
  display:inline-block;
  padding:10px 60px 20px;
  margin:10px;  
  color:#fff;
  
  border:2px solid transparent;
  border-image:linear-gradient(to bottom,transparent 10px,red 0) 2;

  background:
    linear-gradient(blue,blue) top center/calc(100% - 20px) calc(100% - 10px),
    linear-gradient(red,red)   0 8px     /100% 2px;
  background-repeat:no-repeat;

}

<span class="button">Button</span>

И с переменной CSS, чтобы легко контролировать всю форму:

.button {
  --t:10px; /* Distance of the border from the top*/
  --p:10px; /* Distance between the border and background*/
  --b:2;  /* Thickness of the border (unitless to be used with slice)*/
  --c:red;  /* border color*/

  display:inline-block;
  padding:var(--p) 60px calc(2*var(--p));
  margin:10px;  
  color:#fff;
  
  border:calc(1px*var(--b)) solid transparent;
  border-image:linear-gradient(to bottom,transparent var(--t),var(--c) 0) var(--b);

  background:
    linear-gradient(blue,blue) top center/calc(100% - 2*var(--p)) calc(100% - var(--p)),
    linear-gradient(var(--c),var(--c))   0 calc(var(--t) - 1px*var(--b))/100% calc(1px*var(--b));
  background-repeat:no-repeat;

}

<span class="button">Button</span>

<span class="button" style="--c:green;--t:15px;--p:8px;--b:3;">Button</span>

<span class="button" style="--c:#000;--t:25px;--p:15px;--b:1;">Button</span>