css ::before & ::after border alignment - html

Question

I want to give border like this. Please check below code.
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
position: relative;
display: block;
border: 1px solid #fff;
}
button:before {
content: "";
border: 4px solid red;
position: absolute;
left: -9px;
top: -8px;
width: 106%;
height: 125%;
border-radius: 30px;
}
<div id="banner-message">
<button>Hover to change color</button> <br/><br/>
<button>Hover to change color lorem ipsum lorem ipsum</button>
</div>
My problem is when content increases inside button border alignment also getting disturbed. Please give me solution on this.

Answer 1

No need complex calculation. Remove the width and consider right like your did with left. Same thing for height:
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: #0084ff;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
position: relative;
display: block;
border: 1px solid #fff;
}
button:before {
content: "";
border: 4px solid red;
position: absolute;
left: -8px;
top: -8px;
right: -8px;
bottom: -8px;
border-radius: 30px;
}
<div id="banner-message">
<button>Hover to change color</button> <br/><br/>
<button>Hover to change color lorem ipsum lorem ipsum</button>
</div>

Answer 2

You need to combine dynamic and static values together width: calc(100% + 7px);
$blue: #0084ff;
$blue-darker: darken($blue, 5);
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: $blue-darker;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 15px;
color: #fff;
position: relative;
display: block;
&:before {
content: "";
border: 4px solid red;
position: absolute;
left: -7px;
top: -6px;
width: calc(100% + 7px);
height: 111%;
border-radius: 30px;
}
}
Fiddle

Answer 3

Just add some padding to the border and adjust the top and left values to fit your font size.
$blue: #0084ff;
$blue-darker: darken($blue, 5);
body {
background: #20262E;
padding: 20px;
font-family: Helvetica;
}
button {
background: $blue-darker;
border: none;
border-radius: 30px;
padding: 8px 14px;
font-size: 16px;
color: #fff;
position: relative;
display: block;
margin-bottom: 10px;
&::before{
content: "";
border: 4px solid red;
position: absolute;
left: -8px;
top: -8px;
padding: 4px;
width: 100%;
height: 100%;
border-radius: 30px;
}
}
https://jsfiddle.net/d4cugr07/