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%;
    }
  }

Possible duplicate of Can text be hidden and shown using just CSS (no JavaScript code)? — Obsidian Age
– Obsidian Age, Commented Oct 22, 2019 at 2:33

Stacie T. · Accepted Answer · 2019-10-22 04:08:18Z

1

Just change

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

to

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

answered Oct 22, 2019 at 4:08

Stacie T.

4206 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Neha Sharma · Accepted Answer · 2019-10-22 04:29:14Z

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

answered Oct 22, 2019 at 4:29

Neha Sharma

7721 gold badge4 silver badges13 bronze badges

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related