How to make string inside button show on button hover with pure css?

Question

How do I make the string "Contact" show in my button on hover. All the other button's I have are contain icons that I linked my html file to using <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.1/css/all.css"> in the head section. All the buttons with icons on hover show a up after the animation with a white color. But the button with just the and the string "Contact" in between the tags don't show up on hover? I don't know why this is and don't know how to fix it.

HTML

<header id="header">

            <nav id="nav">
                <div class="middle">
                    <ul>
                        <li>
                            <a class="btn" href="contact.html">
                                <i>Contact</i>
                            </a>
                        </li>
                        <li>
                            <a class="btn" href="#">
                                <i class="fab fa-linkedin"></i>
                            </a>
                        </li>
                        <li>
                            <a class="btn" href="#">
                                <i class="fab fa-github"></i>
                            </a>
                        </li>
                        <li>
                            <a class="btn" href="#">
                                <i class="fab fa-twitter"></i>
                            </a>
                        </li>
                    </ul>
                </div>

            </nav>
        </header>

CSS

.middle{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;
  }
  .btn{
    display: inline-block;
    width: 95px;
    height: 90px;
    /* background color of the button */
    /* background: #f1f1f1; */
    margin: 10px;
    border-radius: 30%;
    box-shadow: 0 5px 15px -5px #00000070;
    /* color: #0015ff; */
    /* color: #fff; */
    overflow: hidden;
    position: relative;
  }
  .btn i{
    line-height: 90px;
    font-size: 25px;
    transition: 0.2s linear;
  }
  .btn:hover i{
    transform: scale(1.7);
    color: #f1f1f1;
  }
  .btn::before{
    content: "";
    position: absolute;
    width: 120%;
    height: 120%;
    /* background: #3498db; */
    background: #0015ff;
    transform: rotate(45deg);
    left: -110%;
    top: 90%;
  }
  .btn:hover::before{
    animation: aaa 0.7s 1;
    top: -10%;
    left: -10%;
  }
  @keyframes aaa {
    0%{
      left: -110%;
      top: 90%;
    }50%{
      left: 10%;
      top: -30%;
    }100%{
      top: -10%;
      left: -10%;
    }
  }

Answer 1

The only change I did is added z-index to the :before to 0 to make it push behind and to make the string come on top made that to z-index:1.

I was not having icons code. So, I am not able to test the impact of this fix on that. But as the string is blank it will work fine.

Here is the solution

Thanks

Answer 2

Just change

.btn:hover i{
    transform: scale(1.7);
    color: #f1f1f1;
}

to

.btn:hover i {
  transform: scale(1);
  color: #f1f1f1;
  display:block;
}