Fill button back-color from center towards corners and when leave a button to coming background-color from corners to center on button as circle

user_15796964 0
Viewed 123

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:

   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%;
    }
      <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 Figmaenter link description here

or code pene: enter link description here

css html javascript
2 Answers

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:

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

user_115210020 
button:hover .background {
  width: 120%;
  height: 300%;
}
user_87538180
Related