I have done until now to create a button and inside a tag button I have created another div with class background to give same property for animation effects when click on button.
But I am not sure if in this way is regular syntax for HTML to put another div into tag button in my case?
I AM SHARING MY CODE:

```css
   button {
        height: 73px;
        min-width: 198px;
        border-radius: 5px;
        background-color: $gold;
        border-color: $gold;
        position: relative;
        overflow: hidden;
        display: inline-block;
        font-size: 1.313rem;
        color: black;
        z-index: 2;
        line-height: 30.24px;
        font-weight: bold;
        text-transform: uppercase;
    }

    .background {
        width: 0;
        height: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-image: linear-gradient(#000000, #000000);
        transition: .5s;
        z-index: -1;
        border-radius: 50%;
    }

    button:hover {
        color: $gold;
    }

    button:hover .background {
        width: 500%;
        height: 500%;
    }
```

```html
      <button class='btn'>
            <div class="background"></div>Contact
        </button>
```

But when I Click on button we want background color display as circle and not as eclipse in the center on button. Exactly by the Figma[enter link description here](https://www.figma.com/proto/kwnH9NnM6eZO9eGAjEpEaG/Passport-Site-(Copy)?node-id=10%3A185&scaling=min-zoom&page-id=0%3A1&starting-point-node-id=10%3A185)

or code pene: [enter link description here](https://codepen.io/liamj/pen/vvdRdR)
['https://Stackoverflow.com/questions/70755860', 'https://Stackoverflow.com', 'https://Stackoverflow.com/users/15796964/']
The issue in your approach is that you are setting the background `width` and `height` to 1:1 proportions. This would make circle for a square button. For you to create circle you need to make it proportional to the width and height of your button. For example:

```css
button {
        height: 73px;
        min-width: 198px;
        border-radius: 5px;
        background-color: $gold;
        border-color: $gold;
        position: relative;
        overflow: hidden;
        display: inline-block;
        font-size: 1.313rem;
        color: black;
        z-index: 2;
        line-height: 30.24px;
        font-weight: bold;
        text-transform: uppercase;
    }

    .background {
        width: 0;
        height: 0;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-image: linear-gradient(#000000, #000000);
        transition: .5s;
        z-index: -1;
        border-radius: 50%;
    }

    button:hover {
        color: $gold;
    }

    button:hover .background {
        width: 150%;
        height: 406%;
    }

```

```html
<button class='btn'>
  <span class="background"></span>Contact
</button>
```

To get the proportional width you can use in your case (198/73)\*height. So if you choose for your height to be 130% you should have width of 353%. The higher % the faster your animation will be, so keep that in mind.
```
button:hover .background {
  width: 120%;
  height: 300%;
}

```