Posted on Jul 11, 2020 • Edited on Apr 5, 2022

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