Transition filling in table instead of Button - html

Question

I'm trying to create similar effect found here:
codepen.io/davekilljoy/pen/wHAvb?editors=010
The first button effect to be more specific. I followed most instructions, and added in a few changes to make it fill in from the left instead.
For some reason when I hover over it, it fills in the whole table instead of just the button. I want it to start from the beginning of the button to the end, not from the beginning of the table to the end.
Here's a crappy quality GIF so you get the idea of what's happening now: http://i.imgur.com/vz5TTjy.gif
This is the CSS:
#nav {
float: left;
position: relative;
left: -20px;
}
#nav ul {
list-style-type: none;
}
#nav ul li button {
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: #383736;
letter-spacing:2px;
text-transform: uppercase;
overflow: none;
cursor: pointer;
outline: 0;
background: none;
background: white;
border: 1px solid #383736;
border-radius: 3px;
padding: 7px 12px;
margin: 35px 0px;
z-index: 1;
-webkit-transition: 0.08s ease-in;
}
#nav ul li button:hover {
color: white;
}
#nav ul li button::before {
content: "";
position: absolute;
border: 1px solid white;
background-color: #383736;
right: 100%;
left: 0;
top: 0;
bottom: 0;
z-index: -1;
-webkit-transition: right 0.15s ease;
}
#nav ul li button:hover:before {
right:0;
}
And the HTML:
<div id="nav">
<ul>
<li><button>About Me</button></li>
<li><button>Links</button></li>
<li><button>Contact Me</button></li>
</ul>
</div>

Answer 1

you need to set button in position:relative so pseudo use it as reference.
#nav {
float: left;
position: relative;
left: -20px;
}
#nav ul {
list-style-type: none;
}
#nav ul li button {
position:relative;
font-family: 'Roboto', sans-serif;
font-size: 15px;
color: #383736;
letter-spacing:2px;
text-transform: uppercase;
overflow: none;
cursor: pointer;
outline: 0;
background: none;
background: white;
border: 1px solid #383736;
border-radius: 3px;
padding: 7px 12px;
margin: 35px 0px;
z-index: 1;
-webkit-transition: 0.08s ease-in;
}
#nav ul li button:hover {
color: white;
}
#nav ul li button::before {
content: "";
position: absolute;
border: 1px solid white;
background-color: #383736;
right: 100%;
left: 0;
top: 0;
bottom: 0;
z-index: -1;
transition: right 0.15s ease;
}
#nav ul li button:hover:before {
right:0;
}
<div id="nav">
<ul>
<li><button>About Me</button></li>
<li><button>Links</button></li>
<li><button>Contact Me</button></li>
</ul>
</div>