Have <a> text move down during CSS padding transition

Question

I'm trying to become more comfortable with CSS styling and while making a test site, I ran into some behavior with an anchor tag and a transition that I can't seem to change. I added padding to the link and when clicked, I want to increase the padding on the bottom and have the text move down with the bottom border. While the padding does increase when the tag is active, the text stays put instead of moving down during the transition.

After reading through some posts I've found(there are more), it seems like the general idea is to add relative or absolute positioning on the anchor tag and either set the containing div's display property to table-cell or set the bottom attribute to 0. These solutions don't work I assume because I'm not changing the height but I'm changing the padding.

A small example

.SiteButtons a {
  transition: padding 0.3s ease;
  padding-bottom: 6px;
  border: 1px solid #555;
}

.SiteButtons a:active {
  padding-bottom: 20px;
}

<div class="SiteButtons">
  <a href="#">Home</a>
</div>

Is this something that I can do?

Answer 1

Adjusted CSS:

.SiteButtons {
    display: flex;
}

.SiteButtons a {
    transition: padding 0.3s ease;
    padding-bottom: 6px;
    border: 1px solid #555;
}

.SiteButtons a:active {
    padding-top: 20px;
    padding-bottom: 0;
}

DEMO: http://jsfiddle.net/xfdpxedf/1/