Regular border + offset border on button using CSS - html

Question

css button with double border
I'm trying to acheive the same border effect on the button above.
The closest I can get is the following, but the bottom right corner of the bottom border is not properly rounded:
>
.login__button {
background: transparent;
border: none;
border-width: 2px 1px 2px 2px;
border-style: solid;
border-color: pink;
border-radius: 4px;
color: pink;
margin-bottom: 100px;
position: relative !important;
text-transform: uppercase;
height: 33px;
width: 102px;
box-shadow:
3.5px 4px 0px black,
1.5px 0px 0px pink,
3.5px 4px 0px black,
2px 6px 0px pink;
}
.login__button::before {
background: pink;
content: '';
position: absolute;
height: 35px;
width: 3.0px;
border-radius: 3px;
top: 3%;
right: -2.8px;
}
>
I feel like this should be possible using just box-shadows but there doesnt appear to be a way to modify the width of the box shadow to get just the black portion inset properly.

Answer 1

So the idea is to make the .login__button:before basically look the same as .login__button, but to change the positioning, and to give it a lower z-index than .login__button.
.login__button {
background-color: black;
border: 2px solid #FF00A0;
border-radius: 4px;
color: #FF00A0;
position: relative;
font-size: 15px;
height: 33px;
width: 102px;
cursor: pointer;
}
.login__button:before {
content: '';
background-color: black;
border: 2px solid #FF00A0;
border-radius: 4px;
position: absolute;
width: 100%;
height: 34px;
top: -2px;
left: -2px;
z-index: -1;
cursor: pointer;
box-shadow: 0 0 20px rgb(255,0,160);
}
.login__button:active {
background-color: gold;
}
.login__button:active:before {
background-color: gold;
}
<button class="login__button">LOG IN</button>
And just for the sake of it, I've added a style for then the button is pressed.
.login__button:active {
background-color: gold;
}
.login__button:active:before {
background-color: gold;
}

Answer 2

Here's my attempt.
.login__button {
background: black;
border: 4px solid #FF69B4;
color: #FF69B4;
position: relative;
text-transform: uppercase;
padding: 1em;
display: inline-block;
border-radius: 3px;
}
.login__button::before {
content: '';
background: black;
border: 4px solid #FF69B4;
margin-left: -4px;
position: absolute;
border-radius: 3px;
width: 100%;
height: 100%;
top: 12px;
left: 0;
z-index: -1;
}
Link

Answer 3

I don't know if this is what you're looking for, but here's what I'd probably do.
#a, #b{
border: 2px solid magenta;
border-radius: 4px;
}
#a{
border-top: none;
width: 20%;
box-shadow: 0 0 8px magenta;
background: linear-gradient(to bottom, magenta 0%, black 24%);
}
#b{
color: magenta;
background-color: black;
padding: 4px;
margin-bottom: 4px;
text-align: center;
}
<div id='a'>
<div id='b'>
Button
</div>
</div>

Answer 4

* {
box-sizing: content-box;
}
body { padding: 50px; }
.login__button {
border: 2px solid fuchsia;
border-radius: 4px;
color: fuchsia;
background: black;
text-transform: uppercase;
height: 33px;
width: 102px;
position: relative;
box-shadow: 0 8px 20px 8px rgba(227,37,243,0.3);
}
.login__button::before {
background: black;
border: 2px solid fuchsia;
content: '';
position: absolute;
border-radius: 4px;
width: 100%;
height: 5px;
bottom: -7px;
left: -2px;
}
<button class="login__button">LOG IN</button>