Jumbotron header-button-one animation

Hi,

I have added some CSS to my theme to be able to add a background image to the .header-button-one. All is good except for the fact that when I hover over the button there is a sort of scaling transition that I cannot get rid off.
Any help on this issue would be greatly appreciated.

For reference, here is my added CSS and attached are two screenshot with/without hovering over the button.

#header .bottom-header .header-button-one {
    background-image: url('https://tttt.com/wp-content/uploads/2017/12/get-it-on-google-play-vector-300x103.png') !important;
    background-size: 100% 100%;
    background-clip: padding-box;
    border-style: none;
    transition: none !important;
}

#header .bottom-header .header-button-one :hover {
        text-decoration: none;
        transition: none;
}

Hey there,

I hope you are well today and thank you for your question.

Can you provide me with the URL to your website to be better able to assist you?
I tried https://tttt.com/ but I’m unable to reach the website.

Best regards,
Support.

Hi, I am not sure you got my email where I was giving you the address of the website. It is https://makingsensegames.com
thanks for your help, I really appreciate

Frank

Hello there,

I hope you are doing well today.

You can use the following CSS code to remove the size increase by going to Appearance > Customize > Additional CSS and pasting it there.


/*Button size increase*/
#header .bottom-header .header-button-one {
    background-size: auto !important;
}

Best Regards,
Support

Hello,

sorry for the slow reply, thanks for your help, this pointed me in the right direction, though not sure why in the first place I had a “Button size increase”.

All the best and thanks for your great theme
Frank

Hello there,

I am glad the solution worked for you.
Please feel free to contact us again in the future regarding any other issues.

Best Regards,
Support