Fill Background Animation using CSS

Hello, ladies and gentlemen.
Recently I was trying to make button with background animation.

So I start with this html code:

<div class="outer">

  <h1>Left to Right</h1> &nbsp;
  <div class="outer__button button__left-right">
    <div class="text">Button</div>
  </div>&nbsp;

  <h1>Right to Left</h1> &nbsp;
  <div class="outer__button button__right-left">
    <div class="text">Button</div>
  </div>&nbsp;

  <h1>Top to Bottom</h1> &nbsp;
  <div class="outer__button button__top-bottom">
    <div class="text">Button</div>
  </div>&nbsp;

  <h1>Bottom to Top</h1> &nbsp;
  <div class="outer__button button__bottom-top">
    <div class="text">Button</div>
  </div>
</div>

And I set the font family to Montserrat:

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700;900&display=swap');

html {
  font-family: 'Montserrat', sans-serif;
}

After that I set the layout into flex because I want the content into columns.

.outer {
  margin: 5em;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

h1 {
  color: teal;
  text-transform: uppercase;
}

.outer__button { 
  padding: .5em 1.5em;
  font-size: 2em;
  font-weight: 700;
  color: #000;
  text-transform: uppercase;
  margin-top: -1em;
  border-radius: 100vh;
}

Now lets give fill background animation for the 1st button:

/* LEFT TO RIGHT */
.button__left-right {
  border: 2px solid black;
  background: linear-gradient(to right, #000 50%, #fff 50%);
  background-size: 200% 100%;
  background-position: bottom right;
  transition: all .7s ease-out;
}

.button__left-right:hover {
  border: 2px solid limegreen;
  background-position: bottom left;
  color: #fff;
}

From the code above, I set background with linear-gradient(to right, #000 50%, #fff 50%), because I want the background move from left to right with black-white color. And I set background-size to 200% width and 100% height. When the width is bigger than 100% it will not fill the button with black, instead will be filled with white background.

Then, I set the animation stop at right position of the button so I put background-position: bottom right;. After that, because I want the animation start when hover I put background-position: bottom left; on hover state.

Now let's see the result:

It works :)
Let's add and modify linear-gradient, background-size and background-position to make other buttons have similar animation with different directions.

/* RIGHT TO LEFT */
.button__right-left {
  border: 2px solid black;
  background: linear-gradient(to left, #000 50%, #fff 50%);
  background-size: 200% 100%;
  background-position: bottom left;
  transition: all .7s ease-out;
}

.button__right-left:hover {
  border: 2px solid limegreen;
  background-position: bottom right;
  color: #fff;
}

/* TOP TO BOTTOM */
.button__top-bottom {
  border: 2px solid black;
  background: linear-gradient(to bottom, #000 50%, #fff 50%);
  background-size: 100% 200%;
  background-position: bottom left;
  transition: all .5s ease-out;
}

.button__top-bottom:hover {
  border: 2px solid limegreen;
  background-position: top left;
  color: #fff;
}

/* BOTTOM TO TOP */
.button__bottom-top {
  border: 2px solid black;
  background: linear-gradient(to top, #000 50%, #fff 50%);
  background-size: 100% 200%;
  background-position: top left;
  transition: all .5s ease-out;
}

.button__bottom-top:hover {
  border: 2px solid limegreen;
  background-position: bottom left;
  color: #fff;
}

These are the result:

The full code are posted on my codepen link below: https://codepen.io/flyingduck92/pen/yLeEGNg

That's all folks. See you next time.
Happy coding!

Comments

[Peter Timoshevsky]

Hey, thanks for your article. Could you perhaps help me with a similar, but a bit more complex, thing?