How to eliminate animation flicker on button using css?

Question

I created buttons that have a hover effect. The button fills from bottom to top with a background color white, and the text changes color. However, there is this weird line that appears at the bottom when the animation takes place. Any help would be greatly appreciated.

.project-button div {
    position: relative;
    display: inline-block;
    padding: 1rem;
    margin: 0 1rem 1rem 1rem;
    
    font-size: 1rem;
    font-weight: 700;
    border: 1px solid white;
    border-radius: 15px;
    
    background-repeat: no-repeat;
    transition: background-size .5s, color .5s;
}

.to-top {
    background-position: 50% 100%;
    background-size: 100% 0%;
}

.project-button a {
    color: white;
}

.project-button div:hover {
    background-size: 100% 100%;
    background-image: linear-gradient(white, white);
}

.color-blue:hover {
    color: #51d0de;
}

/* Misc */
html {
  background: black;
  margin: 1em;
}

<div class="project-button">
    <a href="###"><div class="to-top color-blue">Visit Site</div></a>
</div>

I'm using React. Forgot to mention that in the original comment. — klaurtar, Sep 16 '19 at 20:17
No flicker when running this as plain HTML/CSS. Do you have live link? — sunknudsen, Sep 16 '19 at 20:21
I am on chrome and I can run the code snippet above through stack overflow and see a black line at the bottom of the interior of the button while the animation takes place — klaurtar, Sep 16 '19 at 20:36

sunknudsen · Accepted Answer · 2019-09-16T20:55:05.130

Try the following:

I think the problem has to do with how Chrome computes the animation. At times (depending on the frame) the white background is just a bit too small to fill the button revealing the black background (hence the flicker).

.project-button div {
  position: relative;
  display: inline-block;
  padding: 1rem;
  margin: 0 1rem 1rem 1rem;

  font-size: 1rem;
  font-weight: 700;
  border: 1px solid white;
  border-radius: 15px;

  background-image: linear-gradient(white, white);
  background-repeat: no-repeat;
  background-position: 0 -100%;
  background-size: 100% 200%;
  transition: background-position .5s, color .5s;
}

.project-button a {
  color: white;
}

.project-button div:hover {
  background-position: 0% 0%;
}

.color-blue:hover {
  color: #51d0de;
}

/* Misc */
html {
  background: black;
  margin: 1em;
}

<html lang="en">
  <head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
  </head>
  <body>
    <div class="project-button">
      <a href="###"><div class="color-blue">Visit Site</div></a>
    </div>
  </body>
</html>

Inspired by Transition background-color via slide up animation

Awesome! I still cannot figure out what you did that was different from my code by that cleared the issue right up! Thank you! — klaurtar, Sep 16 '19 at 22:43

How to eliminate animation flicker on button using css?

1 Answers1