Trying to make a CSS button that grows on hover, with text remaining the same size

Page with buttons here: http://teamcherry.com.au/jam-games/

The effect I'm trying to achieve with the links on this page is that the button expands when hovered, with the text remaining the same size, and the text staying in the same position on the screen (so the button doesn't appear to 'move' when changing size).

After researching for a while, I've managed to achieve the desired effect using the below css, which changes the padding an margin on hover using css transition:

a.btn {
    display: inline-block;
    background-color: #d11b34;
    color: #fff;
    text-decoration: none;
    font-size: 20px;
    padding: 10px;
    padding-right: 20px;
    padding-left: 20px;
    -webkit-border-radius: 15px;
    -moz-border-radius: 15px;
    border-radius: 15px;
        transition: all 0.3s ease 0s;
}

a.btn:hover {
    background-color: #a61529;
    padding: 15px;
    padding-right: 25px;
    padding-left: 25px;
    margin: -5px;
}

This achieves the effect, but the effect is super jittery when animating in Chrome (and possibly other browsers) and the button seems to quiver when hovering.

Is there another way to achieve this precise effect without animation jittering? Ideally in pure CSS but if JS or JQ is required then that's what I'll use.

Use hardware acceleration and add a bit more time to the animation (you can adjust if needed) and it looks nice. You can also use ease-in-out for a smoother effect. Tested in FF and Chrome

a.btn {
display: inline-block;
background-color: #d11b34;
color: #fff;
text-decoration: none;
font-size: 20px;
padding: 10px;
padding-right: 20px;
padding-left: 20px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
transition: all 0.6s ease;
-webkit-transform: translate3d(0,0,0);
-moz-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
-o-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}