Border behind Button slight below position CSS - html

Question

I m trying to implement below button CSS, I tried to used box-shadow as well psuedo code i.e before after still not getting the output I wanted.
the button that I wanted:
my code:
.et_pb_button {
background-color: #f16922!important;
width: 65%;
outline: 3px solid #f16922;
outline-offset: 10px;
text-transform: uppercase;
font-size: 14px!important;
}
Button

Answer 1

Please see below snippet:
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

Here is an idea with one element and multiple background and border-image:
.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>
And with CSS variable to easily control the whole shape:
.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>

Answer 4

Here's an alternative based on Hanif's suggestion, which uses both pseudo-elements instead of one with a negative z-index. For some backgrounds (e.g. an image or gradient), it might be necessary to adjust the background-position for the ::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>