In this article, we will learn how to create this nice effect called button background effect. when we hover over a button, you can see that the yellow-green background is rotating on the bottom-left corner of the link until it covers the whole thing.

So let's start here in my HTML, I will just go right here and add an anchor tag and say "hover me." 

<a href="#"> hover me</a>

Then I will go to my CSS and add some styles.

 body {
  height: 100vh;
  transform: translate(40%, 30%);
  box-sizing: border-box;
  background-color: #eee;
  font-size: 62.5%;
} 
a{         
        text-decoration: none;
        font-size: 1.2rem;
        border:.1rem solid #272727;
        padding: 1rem 2rem;
        position: relative;
        overflow: hidden; 
        display: inline-block;
      
    }
    a::before{
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: greenyellow;
         z-index: -1;
        transform-origin: bottom left;
        transform: rotate(-90deg);
         transition: transform .5s ease;
    } 
   a:hover::before{ 
        transform: rotate(0deg);
    } 

First of all, I target the body and add basic styling as do normally when creating a web page. This has nothing to do with CSS animation. 

after that, we style a link with some basic styling nothing fancy. again this is not related to animation.

Now in order to create the nice yellow-green background, we need to use the `before` pseudo-element. I will say `a:before` and then add `content: '' ". and some styling for pseudo-element.

Then I will add transition: transform .5s;

Now when I hover over the link, I want it to make some changes to the yellow-green background. So I will add `transform: rotate(0deg)`, meaning it returns to its original horizontal position. And now when I go and hover over the link, you can see the rotation degree is now 0. When I hover away, it returns to -90 degrees.

So we only have one thing left to do, which is hiding the part of the yellow background outside the link. This can be done easily by going to `a` and just saying overflow: hidden;

overflow works only when you set display property maybe flex, block, inline-block.

See full code codepen