Properly transition shared borders - html

Question

Is there a way, with css, to properly transition the border between two elements, while having a shared border (or some trick that simulates it)?
I am trying to get a situation like this (note: if there are any abhorrent wrong-doings in my css, please mention. I am not very experienced with css):
#container {
display: flex;
height: 128px;
width: 100%;
padding: 1em;
background-color: dimgray;
box-sizing: border-box;
}
a {
flex-grow: 1;
display: inline-block;
padding: 0;
line-height: 96px;
border: 0.1em solid #000000;
margin: 0 0 0 -0.1em;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #000000;
text-shadow: 0.08em 0.08em 0.08em rgba(0, 0, 0, 0.4);
background-color: #42cc8c;
text-align: center;
transition: all 0.5s;
}
a:hover {
text-shadow: 0 0 2em rgba(255, 255, 255, 1);
color: #ffffff;
border-color: #ffffff;
}
#container > :first-child {
margin: 0;
}
<div id="container">
button1
button2
</div>
Where the double border in between is "solved" by applying a negative margin (perhaps an alternative would be better?).
The middle border should:
stay white, when switching mouse hover from one button to the other
go from black to white, if neither was hovered before
go from white to black, when the mouse leaves the entire area
But in the above case, there are two overlapping borders, and one element is always on top. Playing with the z-index fails, when moving the mouse from one button to the next (instantly goes black, then transitions back to white). Setting no transition time for e.g. the left border fails, when moving the mouse in from the outside (left border is instant, obviously).
It's likely something, that should be assisted by javascript, but all too often, there is some trick, to achieve the desired behavior anyways.
As a note, the buttons in reality are vue router-link (and targeted by a class). I don't think that's too important though, but maybe switching to a table, and using border-collapse, or something similar, may work (didn't on basic tests).

Answer 1

After you hovered 1st button, you need to change a left border color of the second button.
#container {
display: flex;
height: 128px;
width: 100%;
padding: 1em;
background-color: dimgray;
box-sizing: border-box;
}
a {
flex-grow: 1;
display: inline-block;
padding: 0;
line-height: 96px;
border: 0.1em solid #000000;
margin: 0 0 0 -0.1em;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #000000;
text-shadow: 0.08em 0.08em 0.08em rgba(0, 0, 0, 0.4);
background-color: #42cc8c;
text-align: center;
transition: all 0.5s;
}
a:hover {
text-shadow: 0 0 2em rgba(255, 255, 255, 1);
color: #ffffff;
border-color: #ffffff;
}
a:hover:first-child+a {
border-left-color: #ffffff;
border-radius: 0 0.12em 0.12em 0;
}
#container> :first-child {
margin: 0;
}
<div id="container">
button1
button2
</div>

Answer 2

The solution would be to add a z-index to the :hover. I've also changed the negative margin to -0.2em.
z-index controls which elements show on top, setting it on :hover forces the element that receives the hover to appear on top (including its borders).
#container {
display: flex;
height: 128px;
width: 100%;
padding: 1em;
background-color: dimgray;
box-sizing: border-box;
}
a {
flex-grow: 1;
display: inline-block;
padding: 0;
line-height: 96px;
border: 0.1em solid #000000;
margin: 0 0 0 -0.2em;
border-radius: 0.12em;
box-sizing: border-box;
text-decoration: none;
font-family: "Roboto", sans-serif;
font-weight: 300;
color: #000000;
text-shadow: 0.08em 0.08em 0.08em rgba(0, 0, 0, 0.4);
background-color: #42cc8c;
text-align: center;
transition: all 0.5s;
}
a:hover {
text-shadow: 0 0 2em rgba(255, 255, 255, 1);
color: #ffffff;
border-color: #ffffff;
z-index: 999;
}
#container > :first-child {
margin: 0;
}
<div id="container">
button1
button2
</div>