Rounding background image of button - html

Question

I'm required to have a rounded "growing" effect upon hovering over a button.
Please see this link for a reference of how I need the button to work.
http://demo1.wpopal.com/corpec/home-4/
Currently I have achieved the "Not this" effect upon hover; though my employer wants the effect to have that bit of rounding.
I used the following css on the "not this" button to achieve the growing effect, though i need the edges to be rounded.
.Custom-Button a {
position: relative;
display: inline-block;
padding: 15px 70px;
border: 1px solid #fdc900 !important;
color: white;
font-size: 30px;
font-family: arial;
background-image: linear-gradient(#fdc900, #fdc900);
background-position: 50% 50%;
background-repeat: no-repeat;
background-size: 0% 100%;
transition: background-size .5s, color .5s;
}
.Custom-Button a:hover {
background-size: 100% 100%;
color: black;
}
<div class="Custom-Button">
BUTTON
</div>
I'm only allowed to use CSS to achieve the following effect and have already spent a day trying to get this to work.

Answer 1

applying pseudo element for button solve it ! hope this help!
.Custom-Button{
position: relative;
display: inline-block;
padding: 15px 70px;
border: 1px solid #fdc900 !important;
color: white;
font-size: 30px;
font-family: arial;
border-radius:50px;
position:relative;
}
.Custom-Button a{
z-index:99;
text-decoration:none;
transition:color 1s;
}
.Custom-Button:hover:after{
width:100%;
}
.Custom-Button:hover a{
color:black;
}
.Custom-Button:after{
width:0%;
transition: width 1s;
height:100%;
z-index:-1;
content:"";
position:absolute;
border-radius:50px;
top:0;
left:50%;
transform:translateX(-50%);
background-image: linear-gradient(#fdc900, #fdc900);
}
<div class="Custom-Button">
BUTTON
</div>

Answer 2

You can achieve this effect, by combining z-index, and transitions of position and width of an underlying element:
When hovering, the child of the filler, will transition from
position: absolute; left: 50%;
to
position: absolute; left: 0;
while also resizing from width: 0; to width: 100%;
This is what will give you the desired effekt of "growing from the middle"
also you need to apply a border radius to your growing element
a {
position: relative;
display: inline-block;
padding: 15px 70px;
border: 1px solid #fdc900 !important;
color: black;
font-size: 30px;
font-family: arial;
border-radius: 32px;
}
.text {
position: relative;
z-index: 2000;
}
.filler {
position: absolute;
z-index: 1000;
top: 0;
left: 50%;
width: 0;
height: 100%;
border-radius: 32px;
/* half of <a> height */
background-color: #fdc900;
transition: width .5s, color .5s, left .5s;
}
a:hover .filler {
z-index: 500;
width: 100%;
left: 0;
color: black;
}
a:hover .text {
color: white;
}
<a href="#">
<div class="text">
BUTTON
</div>
<div class="filler">
</div>
</a>