HTML/CSS: Add Icon to Text Button

Question

I'm relying on increasing the top and bottom paddings of the center element to create a hover effect, seen below.

Keeping this effect, is there a way to do the following:

1. To make room for their respective icons, lower the text (help and logout) a little bit (I know I can do position: relative, and then top: 7px, for example, but that messes up the hover animation effect because the center of the 'white' expansion should be the center of the green header)

2. Now that the text is lowered, I want to add a transparent background sprite to each of the two 'buttons' - a question mark symbol for "help", and another symbol for "logout". So the background would still be green, and on top of the green background, I will see a symbol for each button, and the text below each symbol. If I simply do .help {background: url() no-repeat -2px 0;}, for example, the image moves along with the hover effect because the height of the element is increased.

The sprites I'm going to using for the background/icons are in the form of: {url(../theme/images/top_sprites.png) no-repeat -2px 0;}

So how can I use the sprites as Icons for these 'buttons' while keeping the text, the green background, as well as the animation? Note that the borders are added to make it clearer how the animation/effect works.

.header {
      height: 50px;
      background-color: #008b10;
}


.menu {

    padding: 16px;
    text-align:center;
    font-family: Raleway, arial, sans-serif;
    float:left;
    overflow: visible;
    border: 1px solid blue;
}

 .menu a:hover {

    background-color: #ffffff;
    color: #008b10;
    padding: 16px 5px;

}

.menu a {
    /*box-sizing: border-box;*/
    /*float:left*/
    text-decoration: none;
    transition: 0.4s;
    color: #ffffff;
    font-size: 13px;
    text-decoration: none;
    padding: 0 5px;
    border: 1px solid red;
}

<div class=header>
<div class="menu">
  <a class="help" href="#" id="online_help">Help</a>
  <a class="logout" href="#" onclick="openLogout();">Logout</a>
                </div>
</div>

Answer 1

---CSS---

a:hover {
    cursor: pointer;
}
.a-border {
    display: inline-block;
    position: relative;
    color: white;
    padding: 0.5rem 0.25rem;
    margin: 0 1.5rem;
    overflow: hidden;
}
.a-border::after {
    content: url("../img/more-btn-bottom.png");
    display: block;
    position: absolute;
    bottom: 0;
    left: -0.25rem;
    border: none;
    transform: scale(0, 1);
    transform-origin: 0% 100%;
    transition: transform 0.4s;
}
a:hover .a-border::after {
    transform:scale(1, 1);
}
a.focused .a-border::after {
    transform: none;
}

---JS---

function menuclick(underline) {
    var focused = document.getElementsByClassName("focused");
    var i;
    for (i = 0; i < focused.length; i++) {
        var under = focused[i];
        if (under.classList.contains('focused')) {
            under.classList.remove('focused');
        }
    }
    if (!underline.parentElement.classList.contains('focused')) {
        underline.parentElement.classList.add('focused');
    }
}

---HTML---

<a href="#about"><span class="a-border" onclick="menuclick(this)">ABOUT US</span></a>
<a href="#creater"><span class="a-border" onclick="menuclick(this)">CREATERS</span></a>
<a href="#news"><span class="a-border" onclick="menuclick(this)">NEWS</span></a>
<a href="#contact"><span class="a-border" onclick="menuclick(this)">CONTACT</span></a>

Answer 2

.header {
      height: 50px;
      background-color: #008b10;
}


.menu {

    padding: 16px;
    text-align:center;
    font-family: Raleway, arial, sans-serif;
    float:left;
    overflow: visible;
    border: 1px solid blue;
}

 .menu a:hover {

    background-color: #ffffff;
    color: #008b10;
    padding: 16px 5px;

}

.menu a {
    /*box-sizing: border-box;*/
    /*float:left*/
    text-decoration: none;
    transition: 0.4s;
    color: #ffffff;
    font-size: 13px;
    text-decoration: none;
    padding: 0 5px;
    border: 1px solid red;
}

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">


<div class=header>
<div class="menu">
  <a class="help" href="#" id="online_help">Help <i class="far fa-question-circle"></i>

</a>
  <a class="logout" href="#" onclick="openLogout();">Logout <i class="fas fa-sign-out-alt"></i>

</a>
                </div>
</div>

Answer 3

You could animate a pseudoelement on the anchor.

Example:

.header {
  min-height: 50px;
  background-color: #008b10;
}

.menu {
  padding: 0 16px;
  font-family: Raleway, arial, sans-serif;
  border: 1px solid blue;
}

.menu a {
  text-decoration: none;
  transition: 0.4s;
  color: #ffffff;
  font-size: 13px;
  padding: 16px 5px;
  display: inline-flex;
  align-items: center;
  flex-direction: column;
  position: relative;
}

.menu a span {
  position: relative;
}

.menu a:before {
  transition: 0.4s;
  content: '';
  display: block;
  position: absolute;
  background: white;
  opacity: 0;
  transform: scaleY(.5);
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}

.menu a:hover:before {
  transform: scaleY(1);
  opacity: 1;
}

.menu a img {
  max-width: 15px;
  display: block;
  position: relative;
  padding-bottom: 4px;
}

.menu a:hover {
  color: #008b10;
}

<div class=header>
  <div class="menu">
    <a href="#">
      <img src="https://unsplash.it/15">
      <span>Help</span>
    </a>
    <a href="#">
      <img src="https://unsplash.it/15">
      <span>Logout</span>
    </a>
  </div>
</div>