Fill Background Animation using CSS
Tags: css, html, uidesign
Published: 2020-07-11 17:32:31

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

So I start with this html code:

```html
<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](https://fonts.google.com/specimen/Montserrat):

```css
@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.
```css
.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:
```css
/* 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: 
![Left to Right](https://i.imgur.com/yLk3s7I.gif)

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

```css
/* 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:
![Right to Left](https://i.imgur.com/MMuccfm.gif)
![Top to Bottom](https://i.imgur.com/A3kJ76z.gif)
![Bottom to Top](https://i.imgur.com/KwvwGVj.gif)

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!