CODEWITHSUNDEEP
htmlcss
klaurtar
klaurtar

Reputation: 253

How to eliminate animation flicker on button using css?

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>

Upvotes: 2

Views: 638

Answers (1)

sunknudsen
sunknudsen

Reputation: 7290

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

Upvotes: 1

Related Questions